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

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