Fatal编程技术网
  • javascript/
  • Javascript 如何将嵌套迭代器与Mustache.js或handlebar.js一起使用？

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

javascript

Javascript 如何将嵌套迭代器与Mustache.js或handlebar.js一起使用？,javascript,handlebars.js,mustache,Javascript,Handlebars.js,Mustache,我想使用handlebar.js或mustache.js来迭代族列表，然后迭代该族的成员。在这两个循环中，我想显示这两个循环的属性。但是，一旦进入第二次迭代，所有族变量都不可见 {{#each families}} {{#each members}} <p>{{ ( here I want a family name property ) }}</p> <p>{{ ( here I want a member name property )

我想使用handlebar.js或mustache.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}}

{{{#每个家庭}
{{#每个成员}
{{（这里我想要一个姓的财产）}

{{（这里我想要一个成员名属性）}

{{/每个}}
{{/每个}}
这可能吗？我将非常感谢任何帮助

可以使用对象列表轻松嵌套节。使用一种数据结构，其中
族
是一个列表，其中包含一个对象
成员
，该成员包含一个任何对象（或更多列表）的列表，如：

您可以填充如下模板：

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

    
{{#家庭}

  • {{姓氏}

      
{{{#成员}

    • {{给定}}
      • 
{{/成员}

    

    • 
{{/families}
JSFIDLE当前已关闭，下面是使用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>


$（函数（）{
var tpl=$（'#fam'）.html（），
数据={
“家庭”：[
{
“姓氏”：“琼斯”，
“成员”：[
{“给定”：“吉姆”}，
{“给定”：“约翰”}，
{“给定”：“吉尔”}
]
},
{
“姓氏”：“史密斯”，
“成员”：[
{“给定”：“史蒂夫”}，
{“给定”：“萨利”}
]
}
]
},
html=Mustache.to_html（tpl，数据）；
$（“#main”）.append（html）；
});

    
{{#家庭}

  • {{姓氏}

      
{{{#成员}

    • {{给定}}
      • 
{{/成员}

    

    • 
{{/families}
回答得很好@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)});
}
如果初始数组中填充了对象：

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>

    
{{{锯齿状}

  • 

      
{{{#dummyKey}

    • {{key1}}-{{key2}
      • 
{{/dummyKey}

    

    • 
{{/锯齿状}
对不起，我来晚了一点。接受的答案很好，但我想添加一个我认为也很有用的答案，特别是在迭代简单的行/列数组时

使用嵌套把手路径时，可以使用
。/
引用父模板上下文（有关详细信息）

例如，您可以：

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

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

对于以下数据集：

{
  rows: 
    ["1A", "1B"], 
    ["2A", "2B"], 
    ["3A", "3B"]
}
以下内容适用于mustachejs：

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


{{#行}
{{#.}}
{{.}}
{{/.}}
{{/行}
我用胡子寻找同样的问题，答案是关于把手的，胡子的问题需要额外的JS，我知道它很旧，但我会添加我的工作示例，以防其他人需要它。干杯

JSON:

模板：

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

{{{#体验}
{{公司}
{{position}}
责任

    
{{{#任务}

  • {{}}
    • 
{{/tasks}


{{/经验}
您可以使用
运算符引用父循环变量和索引。
运算符：

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

{{{#每个家庭}
{{{#每个成员}
当前成员：{{this.name}}（this=internal-loop）

当前族：{{../this.title}}（../this=parent-loop-iterator）

当前成员索引：{{@index}}

当前族索引：{{@../index}

{{/每个}}
{{/每个}}
您是否也可以添加一个数据对象的样本，将其输入mustache/Handlebar？如果上面的数组还有一个名为“给定”的属性，您希望引用该属性，会发生什么情况？@DominicTobias mustache只允许您引用当前范围中的变量。每个级别都可以有一个
给定的
变量，但不能访问父级别的变量。（车把可能会让你这样做）注意，这只适用于车把，而不适用于胡子。Mustach将只拾取嵌套路径中具有相同名称的“最近”变量，据我所知，无法访问外部级别中声明的具有相同名称的变量。在小胡子模板中使用
。/
语法不会引发错误，但不会获取任何值。感谢您的澄清。事实上我不知道。

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



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



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