把手不會在我的Backbone.js集合上循環

Question

我有一個Backbone應用程序，正在嘗試使用JSON文件填充集合。 我想從JSON生成“標題”列表，以最終變成菜單。 一切進行得很好，除了Handlebars不會在我的收藏中循環（每個）來呈現列表。

相關觀點：

var MenuView = Backbone.View.extend({

template: Handlebars.compile(
    '<ul>' +  
    '{{#each items.models}}<li>{{attributes.title}}</li>{{/each}}' +
    '</ul>'
),

initialize: function  () {
    this.listenTo(this.collection, "reset", this.render);
},   

render: function () {
    this.$el.html(this.template(items));
    return this;
}

});

模型和集合：

var Magazine = Backbone.Model.extend({
urlRoot:"/items",
defaults: {
    id: '',
    title: '',
    pubDate: '1/1',
    image: ''
}
});
var MagazineMenu= Backbone.Collection.extend({
    comparator: 'title',
    model: Magazine,
    url: "/items"
});

路由器：

var MagazineRouter = Backbone.Router.extend({
routes: {
   "" : "listPage",
   "titles/:id" : "showTitle"
}, 
initialize: function  () {
    this.magazineModel = new Magazine();
    this.magazineModel.fetch();


    this.magazineView = new MagazineView({
        model: this.magazineModel
    });

    this.magazineCollection = new MagazineMenu();
    this.magazineCollection.fetch();

    this.menuView = new MenuView({collection: this.magazineCollection});
},

showTitle: function(id) {

    this.magazineModel.set("id", id);
    $("#theList").html(this.magazineView.render().el);
},

listPage : function() {
    $('#theList').html(this.menuView.render().el);
}
});

var router = new MagazineRouter();

$(document).ready(function() {
    Backbone.history.start(); 
});

最后是JSON：

[
{
    "id": "screamingzebras",
    "url": "screamingzebras",
    "title": "Screaming Zebras",
    "pubDate": "2/1",
    "image": "screamingzebras.jpg"
},
{
    "id": "carousellovers",
    "url": "carousellovers",
    "title": "Carousel Lovers",
    "pubDate": "3/1",
    "image": "carousellovers.jpg"
},
{
    "id": "gardenstatuary",
    "url": "gardenstatuary",
    "title": "Garden Statuary",
    "pubDate": "4/1",
    "image": "gardenstatuary.jpg"
},
{
    "id": "sombreromonthly",
    "url": "sombreromonthly",
    "title": "Sombrero Monthly",
    "pubDate": "1/1",
    "image": "sombreromonthly.jpg"
}
]

當我在瀏覽器中運行此程序時，在控制台中沒有任何錯誤。 如果我剛在調用this.$el.html(this.template(items));之前console.log(this.collection) this.$el.html(this.template(items)); 在視圖中，我可以看到具有models屬性的集合，該集合已從JSON正確填充。 當我查看Chrome開發人員工具中的Elements面板時，可以看到它正在生成直至<ul>標記的所有內容。 這使我相信，我只是缺少一個關鍵的邏輯要點，該邏輯要點是使Handlebars每個函數實際遍歷集合。

Answer 1

我在這里看到兩個問題：

1. items未在任何地方定義，因此您的render實際上是在說this.template(undefined) 。
2. 即使您確實有一個名為items的局部變量，您的Handlebars模板也不會知道您已將其稱為items因此它不會知道{{#each items.models}}應該對其進行迭代。

大概您的items實際上應該是視圖的this.collection並且render應該看起來像這樣：

render: function () {
    this.$el.html(this.template(this.collection));
    return this;
}

那應該解決問題1 。 您可以通過兩種方式解決問題2 ：

1. 更改模板以引用正確的內容。
2. 更改調用this.template使items與正確的事物相關聯。

第一個選項將使用上面的render和如下所示的模板：

<ul>
    {{#each models}}
        <li>{{attributes.title}}</li>
    {{/each}}
</ul>

第二個選項將保留您的模板，但更改render以使用：

this.$el.html(
    this.template({
        items: this.collection
    })
);

另一個選擇是使用this.collection.toJSON()向模板提供數據，然后render將使用：

this.$el.html(
    this.template({
        items: this.collection.toJSON()
    })
);

然后模板將是：

<ul>
    {{#each items}}
        <li>{{title}}</li>
    {{/each}}
</ul>