Loccasions: придание событиям основы

 App.Event = Backbone.Model.extend
  idAttribute: "_id"
  url: ->
    if (this.collection)
  ... elided ...

Если вы читали серию работ Джима Ньюберри по тестированию Backbone (с которыми я связывался ранее), этот тест выглядит точно так же, как и его тест на коллекцию, за исключением одной маленькой детали.

Проницательный читатель мог заметить, что наш атрибут id действительно _id . MongoDB использует _id для своего идентификатора, так что это то, что мы увидим в нашем json. Вы можете указать модели Backbone использовать другой атрибут для describedescribe("id", function() {
it("should use _id for the id attribute", function() {
var ev = new App.Event({_id:44, name: "MongoEvent"});
expect(ev.id).toEqual(44);
});
});idAttribute Я также добавил его в модель Event следующим образом:

 index

Для полноты я добавил следующий блок // spec/javascripts/routers/router_spec.js

describe("App.Router", function() {
describe("routes", function() {
beforeEach(function() {
this.router = new App.Router();
this.routeSpy = sinon.spy();
try {
Backbone.history.start({silent: true});
} catch(e) {
console.dir(e);
}
this.router.navigate("away");
});
it("should map the blank route to index", function() {
this.router.bind("route:index", this.routeSpy);
this.router.navigate("", true);
expect(this.routeSpy).toHaveBeenCalledOnce();
expect(this.routeSpy).toHaveBeenCalledWith();
});
});
});спецификации / javascript / models / event_spec.js

 # app/assets/javascripts/router.js.coffee
App or= {}
App.Router = Backbone.Router.extend
  routes:
    ""      : "index"
  index: ->

Удаление describe("index", function() {
beforeEach(function() {
this.router = new App.Router();
this.eventListView = new Backbone.View({});
this.eventListViewSpy = sinon.stub(App, "EventListView").returns(this.eventListView);
});

it("should create the EventListView", function() {
this.router.index();
expect(this.eventListViewSpy).toHaveBeenCalled();
});
}); У нас есть рабочая EventsCollection.

Все о маршруте (r)

Последний бит, который мы должны поставить на место, прежде чем мы сможем загрузить наш клиентский код, — это маршрутизатор. Для наших текущих потребностей маршрутизатор очень прост. Все, что у нас будет, — это «» маршрут, который должен создать наши три представления, а также нашу коллекцию событий. Следуя стандартной практике, у нас будет «» карта маршрута с функцией index: ->
@eventListView = new App.EventListView({collection: window.eventCollection or= new App.EventsCollection()})
@eventListView.render()

 App

Наш тест маршрутизатора (также очень похожий на тест маршрутизатора мистера Ньюберри) проходит с помощью следующего кода:

 start

Маршрутизатор должен создать наши три представления.

 App.start

Сделайте это:

 window.App =
  start: ->
    window.eventCollection = new App.EventsCollection(bootstrapEvents)
    new App.Router()
    Backbone.history.start
      root: "/events"

EventListView создается, передавая window.eventCollection, если он существует.

Поток этих тестов на стороне клиента должен начать чувствовать себя знакомым. В этом случае мы заглушаем представление, которое нужно создать, и затем проверяем, был ли вызван его конструктор. Конечно, мы убираем за собой, восстанавливая заглушку. Я также добавил тест для просмотра карты, но оставляю вам это делать самостоятельно. (Примечание: тест представления карты немного отличается … знаете, почему?)

Вас когда-нибудь пинали в лицо железной начальной загрузкой?

На этом этапе большая часть кода вида / модели / коллекции для отображения событий находится на месте. Однако мы все равно не увидим события, когда загрузим нашу страницу в браузер. Нам нужно загрузить наш код Backbone. Довольно распространенная идиома Backbone — создание функции из объекта приложения верхнего уровня (в данном случае bootstrapEventsfetch

Для приложений Backbone начальная загрузка означает создание маршрутизатора (ов), проверку наличия необходимых коллекций и запуск объекта Backbone.history . Небольшое различие между Loccasions и большинством приложений Backbone, которые я видел, состоит в том, что наш «корневой» маршрут — это не «/», а «/ events», который нам нужно настроить.

Зная все это, функция events#index

 bootstrapEvents

Единственное, что мы действительно не обсуждали, это / app/views/events/index.html.haml

%script
var bootstrapEvents = [];
%h2 Your Events
#map.sixteen_columns
%ul#eventsList
- for event in @events
%script
bootstrapEvents.push(new App.Event({ name: "#{event.name}", description: "#{event.description}:", id: "#{event._id}", }));
%li{:class => @event == event ? :selected : nil}
= render :partial => "event", :locals => {:event => event}
%div.clear
%div#edit_event
= form_for @event || Event.new do |f|
= f.label :name
= f.text_field :name
= f.label :description
= f.text_field :description
= f.submit Решающим моментом при работе с коллекциями является то, загружать их страницей или нет, загружать страницу и App.start Здесь я делаю первое, что означает, что я должен изменить свое представление // app/assets/javascripts/application.js
// Last line of the file
$(App.start)end Изменение достаточно просто:

 do … end

Короче говоря, я добавил два тега <code>% script </ code> для создания объекта <code> bootstrapEvents </ code>.

Я не уверен, что мне нравится смешивать эти вещи в представлении таким образом, но мне нравится сохранять поездку на сервер. Я думаю, я вернусь в этот код позже.

Наконец, я добавил вызов {}

 bundle install

Это здорово, но я все еще не могу добавить событие

Эти сообщения о коде Backbone / клиентской части, кажется, работают намного дольше, чем я ожидаю. Следующий пост будет посвящен добавлению и редактированию событий. Я надеюсь также охватить клиентскую часть Occasions.