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

Question

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

我的模特＆amp;收集是

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可以使用{{#.}}{{.}}{{/.}}

处理数组

Answer 3

这是因为胡子需要一个键/值对 - 对于非空列表而言值为数组。从mustache man page，“非空列表”部分：

Template:

{{#repo}}
  <b>{{name}}</b>
{{/repo}}

Hash:

{
  "repo": [
    { "name": "resque" },
    { "name": "hub" },
    { "name": "rip" },
  ]
}

Output:

<b>resque</b>
<b>hub</b>
<b>rip</b>

如果你只传递一个数组，那么胡子就无法知道在模板中扩展它的位置。

Answer 4

使用Hogan.js实施。

给定模板：

<ul>
{{#produce}}
    <li>{{.}}</li>
{{/produce}}
</ul>

和背景：

var context = { produce: [ 'Apple', 'Banana', 'Orange' ] );

我们得到：

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Orange</li>
</ul>