3

我一直在使用 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]实例。

4

2 回答 2

3

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

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

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

于 2011-05-26T15:17:15.800 回答
1

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

于 2011-05-25T23:17:15.960 回答