javascript - 主干渲染在获取集合后不附加 HTML

Question

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

我在附加行之前放置了一个 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，我会得到正确的内容。这是在文档准备好后完成的。这是我绑定(bind)事件的初始化函数:

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 示例，但无济于事。

Answer 1

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

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

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