icanhaz.js & Mustache.js: рендеринг более сложных элементов - PullRequest
Новая
       24

icanhaz.js & Mustache.js: рендеринг более сложных элементов

3 голосов
/ 26 мая 2011

Я использовал 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] экземпляра.

Ответы [ 2 ]

3 голосов
/ 26 мая 2011

Я понял это, и я был чрезмерно усложнит это.Первоначальная проблема заключалась в том, что мой список не был обработан должным образом, как он должен выглядеть следующим образом: 

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

Надеюсь, это поможет кому-то в замешательстве относительно этого, не знаю, почему я его обдумал: -)

1 голос
/ 26 мая 2011

Вы должны предварительно обработать массив строк, чтобы он уже был в формате массива. Усы ожидают итеративный объект или массив, когда вы используете {#}, а не функцию. Возможно, что часть, которую вы пытаетесь использовать, может сработать, но я не уверен, как.

...