javascript - Backbone.js建模

我刚好接触ebone.js，并且试图弄清楚某些事情，目前我有以下对象：
TodoItem模型
TodoItemView视图
TodoCollection集合

我向TodoCollection中添加了一堆TodoItems，这为每个TodoItemViews创建了TodoItemViews，这呈现了待办事项的基本列表。现在，当我单击待办事项时，我想打开一个新选项卡，其中包含该待办事项的所有数据，格式为（可编辑），并带有“保存”按钮。

我试图弄清楚如何对此模型进行建模.. TodoItemView是否应具有以下click事件：


打开一个标签并填写所有信息并以某种方式绑定事件
从该新选项卡到其中的功能？ （几乎可以肯定是错误的）
创建一个新的EditableTodoItemView，其渲染将打开一个新标签页，
单击TodoItemView创建一个新的EditableTodoItemView，然后
忘记了（我认为更好）


我假设EditableTodoItemView应该引用原始模型，即TodoItem应该在EditableTodoItemView和TodoItemView之间共享。无需创建新的集合，当用户点击保存时，EditableTodoItemView会调用pyramid.sync（）。

同样，我假设当我创建一个新的TodoItem时，将其推入TodoCollection中，后者会为其创建TodoItemView，并且如果该项是新的（即具有默认数据），则可能会自动创建EditableTodoItemView。

这有意义吗？还有什么我应该考虑的吗？

最佳答案

在多个视图之间切换的最简单方法是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()}));。