车把-根据模板中的阵列键进行计算

Question

我是Handlebars的新手，正在使用4.1.2版。我正在尝试将一些用PHP编写的模板移动到Handlebars。

我的数据源是一个JSON提要，其结构如下所示：

[
    {
        "regulations_label": "Europe",
        "groups_label": "Group 1",
        "filters_label: "FF1A"
    },
    {
        "regulations_label": "Europe",
        "groups_label": "Group 1",
        "filters_label: "FF1B"
    },
    {
        "regulations_label": "Europe",
        "groups_label": "Group 2",
        "filters_label: "FF2A"
    },
    {
        "regulations_label": "Asia",
        "groups_label": "Group 999",
        "filters_label: "FF999A"
    },
    {
        "regulations_label": "Asia",
        "groups_label": "Group 999",
        "filters_label: "FF999B"
    },
    {
        "regulations_label": "Americas",
        "groups_label": "Group 10000",
        "filters_label: "FF10000A"
    },
]

我的HTML模板（PHP版本）的输出如下：

• 欧洲
  • 第一组
    • FF1A
    • FF1B
  • 2组
    • FF2A
• 亚洲
  • 999组
    • FF999A
    • FF999B
• 美洲
  • 10000组
    • FF10000A

实现此目标的方法（不复制任何regulations_labelgroups_label 输出或输出期间）是使用条件逻辑，该条件逻辑检查先前的数组值以查看其是否已更改，例如

// $data is the JSON above. 
foreach ($data as $key => $d): 
    if ($data[$key-1]['groups_label'] !== $d['groups_label'])
        echo $d['groups_label'];
    endif;
endforeach;

上面的代码意味着groups_label仅当它与先前的值不同时才渲染，即它只能打印“ Group 1”一次，依此类推。

因此，在把手中，我想应用相同的原理。我已经阅读过把手/胡子-是否有一种内置的方法可以遍历对象的属性？并理解有一个{{@index}}和{{@key}}。

我遇到的问题是我无法在这些条件上应用条件逻辑。例如，没有这样的事情{{@index - 1}}

我的设置方法如下：

<script id="regulations-template" type="text/x-handlebars-template">
    {{#each myregs}}
        - {{regulations_label}} <br>
        -- {{groups_label}} <br>
        ---- {{filters_label}} <br>
    {{/each}}
</script>


<script type="text/javascript">
    var regsInfo = $('#regulations-template').html();

    var template = Handlebars.compile(regsInfo);

    var regsData = template({ myregs: // JSON data shown above });

    $('#output').html(regsData);
</script>


<div id="output"></div>

内容呈现到#outputdiv，但它会重复每个级别，例如

- Europe
    -- Group 1
        ---- FF1A
- Europe
    -- Group 1
        ---- FF1B

之所以会发生此问题，是因为我无法找到一种方法来查看先前的数组值是什么并执行条件逻辑。我怎么解决这个问题？

赏金注意事项：

我正在寻找一种使用车把并利用其提供的任何功能来帮助您解决问题的解决方案。有人评论说，可以在普通的js / jquery中做这种事情。我们希望使用把手来利用它提供的模板，因此赏金需要一个完全使用它的解决方案。这种条件逻辑是许多其他模板系统（不仅限于PHP）的重要组成部分。因此，我不禁想到，由于模板是主要的用例，因此Handlebars中有一种方法。

Answer 1

在纯车把解决方案中，您可以使用以下助手：

<script id="regulations-template" type="text/x-handlebars-template">
{{#each myregs}}
    {{#ifPrevRegulation}} - {{regulations_label}} <br> {{/ifPrevRegulation}}
    {{#ifPrevGroup}}-- {{groups_label}} <br>{{/ifPrevGroup}}
    {{#ifPrevFilter}} ---- {{filters_label}} <br>{{/ifPrevFilter}}
    {{setPrevContext}}
{{/each}}
</script>

在哪里

var prevContext = null;
Handlebars.registerHelper('setPrevContext', function(){
    prevContext = this;
});

Handlebars.registerHelper('ifPrevRegulation', function(options){
    if(!(prevContext  && this.regulations_label == prevContext.regulations_label)){
      return options.fn(this);
    }
});

Handlebars.registerHelper('ifPrevGroup', function(options){
    if(!(prevContext  && this.regulations_label == prevContext.regulations_label && this.groups_label== prevContext.groups_label)){
      return options.fn(this);
    }
});

Handlebars.registerHelper('ifPrevFilter', function(options){
    if(!(prevContext  && this.regulations_label == prevContext.regulations_label && this.groups_label== prevContext.groups_label && this.filters_label == prevContext.filters_label)){
      return options.fn(this);
    }
});