javascript-icanhaz.js和Mustache.js：呈现更复杂的项目

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

解决方法:

我想通了,而我却过于复杂了.最初的问题是我的列表未按预期处理,其外观应为：

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

希望这可以帮助任何对此感到困惑的人,不知道为什么我会过分考虑:-)

标签：mustache,icanhaz-js,javascript
来源： https://codeday.me/bug/20191102/1992545.html