Моделирование Backbone.js - PullRequest
Новая
       37

Моделирование Backbone.js

1 голос
/ 22 января 2012

Я новичок в backbone.js, и, пытаясь что-то выяснить, у меня есть следующие объекты:
Модель TodoItem
Представление TodoItemView
Коллекция TodoCollection

Я добавляю кучу TodoItems в коллекцию TodoCollection, которая создает TodoItemViews для каждого, это отображает базовый список элементов todo. Теперь, когда я нажимаю на элемент задачи, я хочу открыть новую вкладку со всеми данными для этого элемента задачи, в форме (т.е. редактируемой) и кнопке Сохранить.

Я пытаюсь выяснить, как смоделировать это ... если у TodoItemView есть событие click, которое:

  1. открывает вкладку и заполняет всю информацию и каким-то образом связывает события из этой новой вкладки в функции внутри нее? (почти наверняка неправильно)
  2. создать новый EditableTodoItemView, рендеринг которого открывает новую вкладку, нажмите на TodoItemView создает новый EditableTodoItemView, а затем забывает об этом (я думаю, лучше)

Я предполагаю, что EditableTodoItemView должен ссылаться на исходную модель, то есть TodoItem должен быть общим для EditableTodoItemView и TodoItemView. Создавать новую коллекцию не нужно, EditableTodoItemView вызывает backbone.sync (), когда пользователь нажимает сохранить.

Аналогично, я предполагаю, что при создании нового TodoItem я помещаю его в коллекцию TodoCollection, которая создает для него TodoItemView и, возможно, автоматически создает EditableTodoItemView, если элемент новый (то есть имеет данные по умолчанию).

Имеет ли это смысл? Что-нибудь еще, о чем я должен думать?

1 Ответ

0 голосов
/ 06 февраля 2012

Самый простой способ переключения между несколькими представлениями - это Backbone.Router.Вы можете использовать его так: 

var TodoRouter = Backbone.Router.extend({
  routes: {
    "edit/:id":  "edit",   // matches http://yourapp.com/#edit/1234
    ".*":        "index",  // matches http://yourapp.com/#everything-else
  },

  edit: function(id) {
    item = TodoCollection.get(id);
    this.view = EditableTodoItemView({model: item});
    $("#main").html(this.view.render().el);
  },

  index: function() {
    //...
  }

});

Затем просто запустите window.router = new TodoRouter; Backbone.history.start();, где вы запустите приложение.Перед запуском убедитесь, что ваша коллекция TodoCollection получена.Вы можете использовать TodoCollection.bind("reset", _.once(function(){Backbone.history.start()}));.

...