[英]BackboneJS - Calling multiple collections with Handlebars.js
如何使用Handlebars.js来获取和显示几个骨干集合? 我创建了4个json文件,每个文件都分配了自己的集合和模型。
在我的路由器中,我具有初始化:
initialize: function () {
this.allcategoryMenuCollection = new AllCategoryMenuCollection();
this.natcategoryMenuCollection = new NatCategoryMenuCollection();
this.intcategoryMenuCollection = new IntCategoryMenuCollection();
this.topcategoryMenuCollection = new TopCategoryMenuCollection();
}
然后我在路线中定义,当您单击特定链接时,您将被重定向到某个页面:
newpage: function () {
this.artistpageLeftMenuView = new ArtistpageLeftMenuView({el:'#leftMenu'});
this.artistpageLeftMenuView.collections = {
allcategoryMenuCollection: this.allcategoryMenuCollection,
natcategoryMenuCollection: this.natcategoryMenuCollection,
intcategoryMenuCollection: this.intcategoryMenuCollection,
topcategoryMenuCollection: this.topcategoryMenuCollection
};
this.artistpageLeftMenuView.render();
}
我的HTML文件是:
<ul class="sbm2">
{{categoryAll}}
{{#each .}}
<li>
<a href="{{this.url}}">{{this.name}}</a>
</li>
{{/each}}
</ul>
<ul class="sbm2">
{{categoryNat}}
{{#each .}}
<li>
<a href="{{this.url}}">{{this.name}}</a>
</li>
{{/each}}
</ul>
<ul class="sbm2">
{{categoryAll}}
{{#each .}}
<li>
<a href="{{this.url}}">{{this.name}}</a>
</li>
{{/each}}
</ul>
<ul class="sbm2">
{{top100}}
{{#each .}}
<li>
<a href="{{this.url}}">{{this.name}}</a>
</li>
{{/each}}
</ul>
在我的骨干网视图中,我有:
render: function() {
$(this.el).html(this.template({categoryAll:this.collections.allcategoryMenuCollection.toJSON()}));
$(this.el).append(this.template({top100:this.collections.topcategoryMenuCollection.toJSON()}));
$(this.el).append(this.template({categoryNat:this.collections.natcategoryMenuCollection.toJSON()}));
$(this.el).append(this.template({categoryInt:this.collections.intcategoryMenuCollection.toJSON()}));
return this;
}
我不知道它是什么,但是它向我显示了html模板4次,并且没有任何内容?!?!
我不太确定我了解您要做什么。 因为我的解决方案将是微不足道的。 我将这样制作模板:
<ul class="sbm2">
{{#each allcategoryMenuCollection}}
<li>
<a href="{{this.url}}">{{this.name}}</a>
</li>
{{/each}}
</ul>
<ul class="sbm2">
{{#each natcategoryMenuCollection}}
<li>
<a href="{{this.url}}">{{this.name}}</a>
</li>
{{/each}}
</ul>
<ul class="sbm2">
{{#each intcategoryMenuCollection}}
<li>
<a href="{{this.url}}">{{this.name}}</a>
</li>
{{/each}}
</ul>
<ul class="sbm2">
{{#each topcategoryMenuCollection}}
<li>
<a href="{{this.url}}">{{this.name}}</a>
</li>
{{/each}}
</ul>
并使用以下代码渲染:
render: function() {
$(this.el).html(this.template(this.collections.toJSON()));
return this;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.