icanhaz.js 和 Mustache.js：渲染更复杂的项目

Question

我一直在使用 icanhaz.js 进行一些 JS 模板渲染，非常棒！但是，我似乎无法理解渲染一些复杂对象并对其进行迭代背后的想法。

基本上，在模板的标题中，我想渲染一些基本字符串，然后是一个对象的迭代，但我需要先在另一个模板中预处理该对象，因为它有一些额外的变量。

所以，它看起来像这样：

 <script id="tmpl_map" type="text/html">
     <h4>{{ equipment }}
     <h3>{{ number }}</h4>

     {{#rows}}
        {{.}}
     {{/rows}}
 </script>

我的 Javascript 代码对此相当简单：

view = {
    equipment: data.active.equipment,
    number: data.active.number,
    rows: function() {
        // This is where it all falls apart, I don't *get* this
        return function(text, render) {
           var rows = [];
           _.each(data.map.rows, function(el, index) {
               view = { row: el[0], has_split_next: el[1] };
               rows.push(ich.map_header(view));
           });

           return render(rows);
        }
    }
}

基本上，行都有自己的模板，因为它每行都必须检查是否has_split_next 并可能输出额外的 HTML。据我了解，我不能简单地在迭代中使用点符号，所以我需要做这个额外的处理

但是，我得到的只是一堆 [object Object] 实例。

Answer 1

我想通了，我完全把它复杂化了。最初的问题是我的列表没有按预期处理，它应该是这样的：

rows = [{row: 'A', has_split_next: true}, {row: 'B', has_split_next: false}]

当 mustache.js 接收到这样的数组时，代码非常简单：

 view = { 
      equipment: data.active.equipment,
      number: data.active.number,
      rows: rows,
 }   

而且模板很简单：

{{#rows}}
        <li class='item'>{{ row }}</li>
        {{#has_split_next}}
            <li class='split'></li>
        {{/has_split_next}}
{{/rows}}

希望这可以帮助任何对此感到困惑的人，不知道为什么我想多了:-)

Answer 2

您应该预处理您的 rows 数组，以便它已经是数组格式。当您使用 {#} 时，Mustache 需要一个可迭代的对象或数组，而不是一个函数。您尝试使用的部分可能会起作用，但我不确定如何。