2012-02-09 52 views
31

我想使用handlebars.js或mustache.js遍歷一系列家族,然後遍歷該家族的成員。在兩個循環內部,我想顯示兩者的屬性。但是,一旦我進入第二次迭代,沒有任何家庭變量可見。如何在Mustache.js或Handlebars.js中使用嵌套迭代器?

{{#each families}} 
    {{#each members}} 
    <p>{{ (here I want a family name property) }}</p> 
    <p>{{ (here I want a member name property) }}</p> 
    {{/each}} 
{{/each}} 

這可能嗎?我非常感謝任何幫助!

+1

可以還添加數據的一個樣品物體您正在送入小鬍子/車把? – gonchuki 2012-02-09 17:02:03

回答

43

您可以用對象列表輕鬆地嵌套部分。使用數據結構,其中families是具有對象members有任何對象(甚至更多列表)的列表一樣的列表:

{ 
    "families" : [ 
     { 
      "surname": "Jones", 
      "members": [ 
      {"given": "Jim"}, 
      {"given": "John"}, 
      {"given": "Jill"} 
      ] 
     }, 
     { 
      "surname": "Smith", 
      "members": [ 
      {"given": "Steve"}, 
      {"given": "Sally"} 
      ] 
     } 
     ] 
} 

您將能夠填充模板,如:

<ul> 
    {{#families}} 
    <li>{{surname}} 
     <ul> 
     {{#members}} 
     <li>{{given}}</li> 
     {{/members}} 
     </ul> 
    </li> 
    {{/families}} 
    </ul> 

的jsfiddle目前下跌了所以這裏的用JS完整的HTML工作:

<!DOCTYPE html> 
<head> 

    <script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.3.0/mustache.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script> 
    $(function() { 
     var tpl = $('#fam').html(), 
     data = { 
      "families" : [ 
      { 
       "surname": "Jones", 
       "members": [ 
       {"given": "Jim"}, 
       {"given": "John"}, 
       {"given": "Jill"} 
       ] 
      }, 
      { 
       "surname": "Smith", 
       "members": [ 
       {"given": "Steve"}, 
       {"given": "Sally"} 
       ] 
      } 
      ] 
     }, 
     html = Mustache.to_html(tpl, data); 

     $("#main").append(html); 

    }); 
    </script> 

</head> 

<div id="main"></div> 

<script type="template/text" id="fam"> 
    <ul> 
    {{#families}} 
    <li>{{surname}} 
     <ul> 
     {{#members}} 
     <li>{{given}}</li> 
     {{/members}} 
     </ul> 
    </li> 
    {{/families}} 
    </ul> 
</script> 
+2

[** Handlebars **](http://jsfiddle.net/KyleMit/nL32Q/1/)和[** Mustache **]的小提琴(http://jsfiddle.net/KyleMit/e3kMw/1/) – KyleMit 2014-02-05 14:21:46

+1

如果上面的數組也有一個名爲「given」的屬性,您想要引用會發生什麼? – 2015-02-06 11:56:37

+0

@DominicTobias小鬍子只允許你引用當前範圍的變量。你可以在每個級別有一個'給定'變量,但不能訪問父級變量。 http://jsfiddle.net/9jpnpw7a/1/(把手可能會讓你這樣做) – maxbeatty 2015-02-06 17:18:22

5

大答案@maxbeatty。

我只是想添加另一個例子,如果任何人有同樣的問題,並不能理解上述解決方案。

首先我有我想拆就每4個元素的一個維數組:

// this is the one dimensional data we have from let's say a mysql query 
var array = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', ...]; 

// think of it as [[], [], [], [], [], ...] 
// but instead we'll be adding a dummy object with a dummyKey 
// since we need a key to iterate on 
var jagged = []; 

var size = 4, // this is the size of each block 
    total = array.length/block; // total count of all blocks 
// slice the initial one dimensional array into blocks of 4 elements each 
for (var i=0; i < total; i++) { 
    jagged.push({dummyKey: array.slice(i*size, (i+1)*size)}); 
} 

現在,如果我們通過jagged進入我們的觀點,我們可以遍歷它這樣:

<ul> 
{{#jagged}} 
    <li> 
     <ul> 
      {{#dummyKey}} 
      <li>{{.}}</li> 
      {{/dummyKey}} 
     </ul> 
    </li> 
{{/jagged}} 
</ul> 

如果我們有我們的初始陣列填充對象:

var array = [{key1: 'a', 
       key2: 'b'}, 
      {key1: 'c', 
       key2: 'd'}, 
      {key1: 'e', 
       key2: 'f'}, 
       ... 
]; 

然後在我們的項目我們將有:

<ul> 
{{#jagged}} 
    <li> 
     <ul> 
      {{#dummyKey}} 
      <li>{{key1}} - {{key2}}</li> 
      {{/dummyKey}} 
     </ul> 
    </li> 
{{/jagged}} 
</ul> 
51

對不起,我在這裏的遊戲有點晚。接受的答案很好,但我想添加一個我認爲也很有用的答案,特別是在迭代簡單的行/列數組時。

當您使用嵌套車把路徑時,可以使用../來引用父模板上下文(see here以獲取更多信息)。

因此,對於你的榜樣,你可以這樣做:

{{#each families}} 
    {{#each members}} 
    <p>{{../surname}}</p> 
    <p>{{given}}</p> 
    {{/each}} 
{{/each}} 

這對我來說特別有用,因爲我是在網格,我想給每平方對應的行和列的位置的類名。所以,如果rowscolumns,只需返回數組,我可以這樣做:

<tbody> 
    {{#each rows}}               
    <tr> 
     {{#each columns}} 
     <td class="{{this}}{{../this}}"></td> 
     {{/each}} 
    </tr> 
    {{/each}} 
</tbody> 

更新

該解決方案是把手。下面的評論解釋了爲什麼它不能在鬍子中使用。

+3

請注意,這隻適用於把手,而不是鬍鬚。小鬍子只會在嵌套路徑中拾取具有相同名稱的「最接近」變量,據我所知,無法訪問在外層聲明同名的變量。在Mustache模板中使用'../'語法不會引發錯誤,但不會提取任何值。 – Pere 2014-07-23 11:06:34

+0

感謝您的澄清。其實我不知道。 – Samo 2014-07-25 14:27:00

+1

正是我在找的!感謝分享 – 2015-09-04 18:38:18

1

對於數據集如下圖所示:

{ 
    rows: 
    ["1A", "1B"], 
    ["2A", "2B"], 
    ["3A", "3B"] 
} 

以下將mustachejs工作:

<tbody> 
    {{#rows}} 
    <tr> 
     {{#.}} 
     <td>{{.}}</td> 
     {{/.}} 
    </tr> 
    {{/rows}} 
</tbody> 
0

我用鬍子尋找同樣的問題,並給出了車把的答案,和那些對於鬍子需要額外的JS,我知道它是舊的,但我會添加我的工作示例,以防別人需要它。乾杯!

JSON:

"experience": [ 
    { 
      "company": "Company 1", 
      "position": "Graphic Designer", 
      "tasks": ["Task 1", "Task 2", "Task 3"] 
    }, 
    { 
      "company": "Company 2", 
      "position": "Graphic Designer", 
      "tasks": ["Task 1", "Task 2", "Task 3", "Task 4", "Task 5"] 
    } 
] 

TEMPLATE:

{{#experience}} 
     <h2>{{company}}</h2> 
     <div class="position">{{position}}</div> 
     <div class="occupazione">Responsabilities</div> 
      <ul> 
      {{#tasks}} 
      <li>{{.}}</li> 
      {{/tasks}} 
      </ul> 
{{/experience}}