Question

我一直在使用icanhaz.js进行一些JS模板渲染，这很棒！但是，我似乎无法掌握渲染一些复杂对象背后的想法，然后迭代它们。

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

所以，它看起来像这样：

 <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需要一个可迭代的对象或数组，而不是函数。您尝试使用的部分内容可能有效，但我不确定如何使用。

icanhaz.js＆amp; Mustache.js：渲染更复杂的项目

2 个答案: