收集获取后骨干渲染不附加 HTML答案

【问题标题】：Backbone render not appending HTML after collection fetch收集获取后骨干渲染不附加 HTML
【发布时间】：2014-02-24 12:32:53
【问题描述】：

我正在构建一个清单应用程序，我刚刚从Backbone Todo example 移植了大部分代码。我被困在刷新我的应用程序的部分，它应该从存储在本地存储中的所有内容中附加 HTML。当我在控制台中键入它时，追加工作，并且我的清单的新项目添加得很好。但是刷新页面，一切都没有了。

我在 append 行之前放置了一个 console.log 行来打印 view.render().el 的内容，并验证它是正确的：

renderItem: function(listItem) {
    var view = new ListItemView({model: listItem});     
    this.$("#myChecklist").append(view.render().el);
    $('[type="checkbox"]').checkboxradio(); // jQuery re-render
},

如果我打印出（console.log）view.render().el，我得到的内容是正确的。这是在文档准备好之后完成的。这是我绑定事件的初始化函数：

initialize: function() {
    this.listenTo(checklistItems, 'add', this.renderItem); // runs renderItem() when model is added to checklist
    checklistItems.localStorage = new Backbone.LocalStorage("items");
    checklistItems.fetch();
},

在调用 renderItem 函数后，HTML 保持不变（id=myChecklist 的 ul 内部仍然没有任何内容）。

其余代码在我的repo here 中。我使用的是 main.js，而不是 app 或 index.js。

对于我的生活，我无法弄清楚出了什么问题，并尝试仔细遵循 Todo 示例但无济于事。

【问题讨论】：

所以checklistItems 是全局的，您的本地存储项中确实有数据，但没有触发'add' 事件？这是哪个版本的Backbone？您是否尝试过在checklistItems 上收听其他事件（例如'all'），看看会发生什么？
当我输入除 'add' 以外的任何内容时，什么都没有发生。
我发现了问题。骨干路由器将一个模板附加到 HTML 正文中，但这是在我的项目“渲染”之后发生的（到甚至没有实例化的正文上）。

标签： javascript jquery backbone.js

【解决方案1】：

尝试在脚本开头初始化checklistItems 变量：

var checklistItems = new Backbone.Collection();
checklistItems.localStorage = new Backbone.LocalStorage("items");

window.HomeView = Backbone.View.extend({
...

【讨论】：