icanhaz.js＆Mustache.js：渲染更復雜的項目

我一直在使用icanhaz.js進行一些JS模板渲染，這太棒了！但是，我似乎無法理解渲染一些複雜對象背後的想法，然後迭代它們。icanhaz.js＆Mustache.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]實例。

來源

2011-05-25 Bartek

我想通了，我完全過分複雜。最初的問題是，由於預期不處理我的列表中，它看起來應該是：

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-26 15:17:15 Bartek

您應該預處理行數組，以便它已經是數組格式。當您使用{＃}而不是函數時，小鬍子需要一個可迭代的對象或數組。有可能你嘗試使用的部分可能會起作用，但我不知道如何。

來源

2011-05-25 23:17:15 sciritai

謝謝，這最終幫助我想出了它。我只是過分複雜的事情。乾杯! – Bartek 2011-05-26 15:17:47

沒問題。大約5個月前開始在工作中使用鬍子，並試圖做一些這樣的複雜的東西。最好將所有數據重構爲你需要的格式。我發現模板首先有助於編寫重構代碼，因爲您確切知道它應該如何顯示。 – sciritai 2011-05-26 19:33:21

icanhaz.js＆Mustache.js：渲染更復雜的項目

回答

相關問題