Question

我们有一个我们想要用把手模板渲染的项目列表，以便每对都包含在div中。以下是JSON数据结构的示例：

var exampleData = [
    { Label : "Apple" },
    { Label : "Banana" },
    { Label : "Cherry" },
    { Label : "Damson" },
    { Label : "EggPlant"},
    { Label : "Fig" },
    { Label : "Grape" }
];

我们希望将数据包装成两个。例如：

<div class="WRAPPER">
    <b class="EACH">
        <a>Apple</a>
    </b>
    <b class="EACH">
        <a>Banana</a>
    </b>
</div>
<div class="WRAPPER">
    <b class="EACH">
        <a>Cherry</a>
    </b>
    <b class="EACH">
        <a>Damson</a>
    </b>
</div>
<div class="WRAPPER">
    <b class="EACH">
        <a>EggPlant</a>
    </b>
    <b class="EACH">
        <a>Fig</a>
    </b>
</div>
<div class="WRAPPER">
    <b class="EACH">
        <a>Grape</a>
    </b>
    <b class="EACH">
        <a></a>
    </b>
</div>

上例中的每个水果都是来自数据结构的值，其他一切都是我们想要定义为HTML的模板。

此外，如果数据的值有奇数，我们希望渲染一组空白标记（如上面的a标记所示。

在handlebars.js中模板化这种模式的正确方法是什么？或者是否有一个特定的助手可以实现这一目标？

Answer 1

如果您可以更改数据格式，使其在单个对象上成对构建，那么这将非常简单。

var exampleData = [
    { Label1 : "Apple", Label2 : "Banana" },
    { Label1 : "Cherry", Label2 : "Damson" },
    { Label1 : "EggPlant", Label2 : "Fig" },
    { Label : "Grape", Label2: "" }
];

{{! Iterate top level array }}
{{#each this}}
    <div class="WRAPPER">
        <b class="EACH">
            <a>{{Label1}}</a>
        </b>
        <b class="EACH">
            <a>{{Label2}}</a>
        </b>
     </div>    
{{/each}}

或者，您可以将数据组织成每个要扩展的子数组：

var exampleData = [
    [{ Label : "Apple" }, { Label : "Banana" }],
    [{ Label : "Cherry" }, { Label : "Damson" }],
    [{ Label : "EggPlant"}, { Label : "Fig" }],
    [{ Label : "Grape"}, { Label : "" }]
];

{{! Iterate top level array }}
{{#each this}}
    <div class="WRAPPER">
        {{! Iterate each sub-array for however many elements there are}}
        {{#each this}}
            <b class="EACH">
                <a>{{Label}}</a>
            </b>
        {{/each}}
     </div>    
{{/each}}

这两种方法在将数据传递给模板以组织数据以匹配模板的功能之前需要对数据进行一些预处理，但是它允许您按原样使用通用模板功能，而无需编写自定义帮助程序或生成HTML直接来自您的javascript或帮助程序（这通常是首先使用模板系统的重点）。

如果我使数据适合模板功能和功能而不是尝试以相反的方式执行它，我发现把手更容易使用，并且通常只需要很小的代码来重新组织数据。

当然，如果标签确实是您唯一的数据，那么您不需要包装器对象。

var exampleData = [
    ["Apple" ,"Banana"],
    ["Cherry" "Damson"],
    ["EggPlant", "Fig"],
    ["Grape", ""]
];

{{! Iterate top level array }}
{{#each this}}
    <div class="WRAPPER">
        {{! Iterate each sub-array for however many elements there are}}
        {{#each this}}
            <b class="EACH">
                <a>{{this}}</a>
            </b>
        {{/each}}
     </div>    
{{/each}}

Answer 2

也许这些成分可以帮助您找到一个好的解决方案。

在每个内容中，您可以访问数组的索引，如：

{{#each this}}
  The current index :{{@index}}
{{/each}}

还可以在数组中显示特定项目，如下所示：

{{arr.1.label}}

结合this优秀的数学助手，您应该能够胜任这项工作。

如何在div中包装值对？

2 个答案: