我是backbone.js的新手,并试图弄清楚一些事情,我目前有以下对象:
TodoItem 模型
TodoItemView View
TodoCollection 集合
我将一堆 TodoItem 添加到 TodoCollection,这会为每个 TodoItem 创建 TodoItemView,这会呈现一个基本的待办事项列表。现在,当我单击一个待办事项时,我想打开一个新选项卡,其中包含该待办事项的所有数据,以表单(即可编辑)和“保存”按钮。
我正在尝试弄清楚如何对此进行建模..如果 TodoItemView 有一个点击事件:
- 打开一个选项卡并填写所有信息并以某种方式绑定(bind)事件 从新选项卡到其中的功能? (几乎肯定是错的)
- 创建一个新的 EditableTodoItemView,其渲染会打开一个新选项卡, 单击 TodoItemView 创建一个新的 EditableTodoItemView,然后 忘记它(我认为更好)
我假设 EditableTodoItemView 应引用原始模型,即 TodoItem 应在 EditableTodoItemView 和 TodoItemView 之间共享。不需要创建新的集合,当用户点击保存时,EditableTodoItemView 会调用backbone.sync()。
同样,我假设当我创建一个新的 TodoItem 时,我将其推送到 TodoCollection 中,TodoCollection 会为其创建一个 TodoItemView,并且如果该项目是新的(即具有默认数据),则可能会自动创建一个 EditableTodoItemView。
这有道理吗?我还应该考虑什么吗?
最佳答案
在多个 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()}));
。
关于javascript - Backbone.js 建模,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8956784/