Javascript 车把赢得'；t在我的Backbone.js集合上循环

我有一个主干应用程序，尝试使用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 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"
}
]

当我在浏览器中运行此操作时，控制台中不会出现任何错误。如果我

console.log（this.collection）

就在调用

this.el.html（this.template（items））之前

在视图中，我可以看到集合中有一个从JSON正确填充的models属性。

---

当我查看Chrome开发工具中的Elements面板时，我可以看到它正在生成所有内容，包括

标记。这让我相信，我只是缺少了一个关键的逻辑点，那就是让车把的每个功能实际上在集合中循环。

我在这里看到两个问题：

项

没有在任何地方定义，因此您的

渲染

实际上是在说

此.template（未定义）

即使您确实有一个名为

items

的局部变量，您的Handlebar模板也不会知道您调用了

items

，因此它也不会知道

{{{each items.models}

应该对其进行迭代

假设您的

项目

实际上应该是视图的

此集合

，而您的

渲染

应该更像这样：

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

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

这将解决问题1。您可以通过两种方式解决问题2：

更改模板以引用正确的内容

更改调用

this.template

的方式，以便

项与正确的内容关联

第一个选项将使用上面的

渲染

和如下所示的模板：

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

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

另一个选项是使用

this.collection.toJSON（）

向模板提供数据，然后

render

将使用：

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

然后模板将是：

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

{{{#每项}
{{title}}
{{/每个}}

谢谢。。。但我尝试了这三种解决方案，结果都是一样的：什么都没有。除了

s之外没有输出，没有错误。我想问题是这样的：如果我在render函数中使用console.log（this.collection），我会看到：r{length:0，models:Array[0]，_byId:Object，_listenId:“l4”，_events:Object…}_byId:Object _events:Object\u listenId:“l4”length:4 models:Array[4]proto:s，所以初始输出表示长度为零，这就解释了为什么每个都没有循环。但是扩展后的输出显示长度为4，然后应该是其中有4个模型。主干的

fetch

是一个AJAX调用，因此在您说

c.fetch（）

之后集合将立即为空。然后，服务器将响应并填充集合。控制台保存对集合的实时引用，以便在AJAX调用即将完成时反映更改。尝试

fetch（{reset:true}）

并将您的

render

调用绑定到重置事件：

this.listenTo（this.collection，'reset'，this.render）

。好吧，这很有效。。。一会儿。当我试图导航到另一个项目时，我开始得到未捕获的TypeError:cannotreadproperty'\u listenId'of undefined。现在，这就是我所能得到的——我的另一个一直运行良好的视图正在返回相同的错误。谷歌搜索似乎暗示这是一个时间问题，但其他地方没有一个解决方案真正适用于我非常简单的应用程序。Grrr.我看不到任何明显的变化（但是你的

$（“#theList”）.html（）

调用最终会把你的视图事件搞砸：）。你能在jsfiddle.net或jsbin.com上复制这个问题吗？我也有同样的错误，仅供参考，请确保你传递的是“集合”而不是“模型”。例如：app.forecashourly=new app.views.forecashourly（{el:'hourly'，collection:hourlyList}）；