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

【问题标题】：Problem Render backbone collection using Mustache template问题使用 Mustache 模板渲染骨干集合
【发布时间】：2011-11-26 02:45:44
【问题描述】：

我对主干 js 和 Mustache 还是很陌生。我正在尝试从 rails json 对象加载页面加载的主干集合（对象数组）以保存额外的调用。我在使用 mustache 模板渲染骨干集合时遇到了麻烦。

我的模型和收藏是

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>

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

【问题讨论】：

你能发布你的小胡子模板吗？
@DerickBailey，添加了信息，请查看..

标签： javascript jquery templates backbone.js mustache

【解决方案1】：

最后结果证明 mustache 不处理发送到模板的对象数组，所以我不得不用其他类似的对象包装它

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}}

希望对某人有所帮助。

【讨论】：

【解决方案2】：

Mustache 可以使用 {{#.}}{{.}}{{/.}} 处理数组

【讨论】：

这比公认的答案要好得多。请注意，如果您的数组是一个对象数组，您可能想要做类似{{#.}}{{name}}{{/.}} 的事情（请参阅 OPs 问题）

【解决方案3】：

发生这种情况是因为 mustache 需要一个键/值对 - 作为一个数组的值 - 用于非空列表。来自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>

如果你只传递一个数组，mustache 无法知道在模板中的何处展开它。

【讨论】：

【解决方案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>

【讨论】：

这也是一个有效的小胡子示例，Hogan 正在“针对小胡子测试套件开发”。