javascript - Backbone.js 建模

Question

我是backbone.js的新手，并试图弄清楚一些事情，我目前有以下对象:
TodoItem 模型
TodoItemView View
TodoCollection 集合

我将一堆 TodoItem 添加到 TodoCollection，这会为每个 TodoItem 创建 TodoItemView，这会呈现一个基本的待办事项列表。现在，当我单击一个待办事项时，我想打开一个新选项卡，其中包含该待办事项的所有数据，以表单(即可编辑)和“保存”按钮。

我正在尝试弄清楚如何对此进行建模..如果 TodoItemView 有一个点击事件:

1. 打开一个选项卡并填写所有信息并以某种方式绑定(bind)事件从新选项卡到其中的功能？ (几乎肯定是错的)
2. 创建一个新的 EditableTodoItemView，其渲染会打开一个新选项卡，单击 TodoItemView 创建一个新的 EditableTodoItemView，然后忘记它(我认为更好)

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

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

这有道理吗？我还应该考虑什么吗？

Answer 1

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