问题使用Mustache模板渲染骨干集合

Question

我是骨干js和胡子的新手.我试图从rails json对象加载页面加载的主干集合(对象数组)以保存额外的调用.我正在使用胡子模板渲染骨干集合时遇到麻烦.

我的模特和收藏品

var Item =  Backbone.Model.extend({

});

App.Collections.Items= Backbone.Collection.extend({
    model: Item,
    url: '/items'
});

并查看

App.Views.Index = Backbone.View.extend({
    el : '#itemList',
    initialize: function() {
        this.render();
    },

    render: function() {
        $(this.el).html(Mustache.to_html(JST.item_template(),this.collection ));
        //var test = {name:"test",price:100};
        //$(this.el).html(Mustache.to_html(JST.item_template(),test ));
    }
});

在上面的视图渲染中,我可以渲染单个模型(注释的测试对象),但不能渲染集合.我完全被击中了,我尝试了下划线模板和小胡子,但没有运气.

这就是模板

<li>
<div>
  <div style="float: left; width: 70px">
    <a href="#">
      <img class="thumbnail" src="http://placehold.it/60x60" alt="">
    </a>
  </div>
  <div style="float: right; width: 292px">
    <h4> {{name}} <span class="price">Rs {{price}}</span></h4>
  </div>
  </div>
</li>

而我的对象数组看起来像这样

Answer 1

最后,事实证明胡子不处理发送到模板的对象数组,所以我不得不用其他对象包装它

render: function() {
    var item_wrapper = {
          items : this.collection
    }

    $(this.el).html(Mustache.to_html(JST.item_template(),item_wrapper ));

}

并在模板中循环items数组以呈现html

{{#items}}
<li>
<div>
  <div style="float: left; width: 70px">
    <a href="#">
      <img class="thumbnail" src="http://placehold.it/60x60" alt="">
    </a>
  </div>
  <div style="float: right; width: 292px">
    <h4> {{name}} <span class="price">Rs {{price}}</span></h4>
  </div>
  </div>
</li>
{{/items}}

希望对某人有帮助.

Answer 2

Mustache可以使用 {{#.}}{{.}}{{/.}}