把手不会遍布我的Backbone.js集合
我有一个Backbone应用程序，我试图使用JSON文件填充集合。 我想从JSON生成一个“标题”列表，最终变成一个菜单。 一切都很顺利，除了把手不会循环（每个）在我的收藏上来渲染列表。
相关观点：
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)); 在视图中，我可以看到具有从JSON正确填充的模型属性的集合。 当我查看Chrome开发工具中的Elements面板时，可以看到它正在生成一切，包括<ul>标签。 这让我相信，我只是错过了一个关键的逻辑点，即让Handlebars的每个功能都能实际循环收集。
我在这里看到两个问题：
items没有在任何地方定义，所以你的render真的说this.template(undefined) 。 items的局部变量，你的Handlebars模板也不会知道你已经调用它的items所以它不会知道{{#each items.models}}应该迭代它。 据推测你的items应该是视图的this.collection ，你的render应该看起来更像这样：
render: function () {
this.$el.html(this.template(this.collection));
return this;
}
这应该解决问题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>