如何将嵌套迭代器与 Mustache.js 或 Handlebars.js一起使用

How do I use nested iterators with Mustache.js or Handlebars.js?

本文关键字：js Handlebars 一起 Mustache 嵌套 迭代器      更新时间：2023-09-26

我想使用车把.js或胡子.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}}

这可能吗？我将非常感谢任何帮助！

抱歉，

我在这里玩得有点晚了。接受的答案很棒，但我想添加一个我认为也有用的答案，特别是如果您正在迭代简单的行/列数组。

使用嵌套车把路径时，可以使用../引用父模板上下文(有关详细信息，请参阅此处(。

因此，对于您的示例，您可以执行以下操作：

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

这对我来说特别有用，因为我正在制作一个网格，我想给每个方块一个与其行和列位置相对应的类名。所以如果rows和columns，只需返回数组，我可以这样做：

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

更新

此解决方案适用于车把。下面的评论解释了为什么它在 Mustache 中不起作用。

您可以使用对象列表轻松嵌套部分。使用数据结构，其中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>

很好的答案@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>

对于如下所示的数据集：

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

以下内容将在胡子中工作：

<tbody>
    {{#rows}}
    <tr>
        {{#.}}
        <td>{{.}}</td>
        {{/.}}
    </tr>
    {{/rows}}
</tbody>
您可以使用

../ 运算符引用父循环变量和索引： 

{{#each families}}
  {{#each this.members}}
    <p>Current member: {{ this.name }} (this = inner loop itterator)</p>
    <p>Current family: {{ ../this.title }} (../this = parent loop itterator)</p>
    <p>Current member index: {{ @index }}</p>
    <p>Current family index: {{ @../index }}</p>
  {{/each}}
{{/each}}

我正在使用小胡子寻找同样的问题，并且给出了车把的答案，而胡子的答案需要额外的 JS，我知道它很旧，但我会添加我的工作示例以防万一其他人需要它。干杯！

杰森：

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

模板：

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