把手在每个标记之外绑定

时间:2018-03-30 08:58:35

标签: javascript json handlebars.js each bind

我有一个问题是在标记中的每个“sectorPressCoverageElements”之外绑定把手中的对象。 这是我的数据,是json:

{
  "name": "Rassegna",
  "page": 1,
  "pages": 7,
  "sectorsPressCoverageElements": [
    {
      "id": 25129,
      "media": "media",
      "linkMedia": "",
      "article": "article",
      "journalist": "",
      "linkJournalist": "",
      "publishingDate": "2017-11-23T09:00:00",
      "purchase": false
    },
    {
      "id": 25129,
      "media": "media",
      "linkMedia": "",
      "article": "article",
      "journalist": "",
      "linkJournalist": "",
      "publishingDate": "2017-11-23T09:00:00",
      "purchase": false
    }
  ],
  "categories": [
  ],
  "error": null
}

我的问题是绑定“名称”在每个之外。 这个我的标记区域用名称绑定“数据名称”(例如在json:“name”:“Rassegna”):

<script id="handlePressCoverage" type="text/x-handlebars-template">
    {{#each sectorsPressCoverageElements}}
    <tr data-id="{{id}}" data-category="0">
        @*<td> <input type="checkbox" class="select-element"></td>*@
        <td class="col-xs-2">{{#simplifyDate publishingDate}}{{/simplifyDate}}</td>    
            <text>
                <td class="col-xs-1"><button data-id="{{id}}" data-name="{{HOW BIND NAME HERE??}}" class="btn btn-success btn-xs iPressShare">Save &nbsp<i class="iPressIconShare fas fa-share-alt"></i></button></td>
            </text>
    </tr>
    {{/each}}
</script>

将数据传递给车把:

var sourcePressCoverage = $("#handlePressCoverage").html();
var templatePressCoverage = Handlebars.compile(sourcePressCoverage);
           $.getJSON(url, function (data) {    
                $htmlsourcePressCoverage = $(templatePressCoverage(data));              
           });

1 个答案:

答案 0 :(得分:0)

要绑定name之外的each,您可以在Handlebar中使用../ segments。这将根据父上下文评估其路径。

例如,在您的情况下,只需将../name放入data-name属性即可生成Rassegna

<script id="handlePressCoverage" type="text/x-handlebars-template">
{{#each sectorsPressCoverageElements}}
<tr data-id="{{id}}" data-category="0">
    @*<td> <input type="checkbox" class="select-element"></td>*@
    <td class="col-xs-2">{{#simplifyDate publishingDate}}{{/simplifyDate}}</td>    
        <text>
            <td class="col-xs-1"><button data-id="{{id}}" data-name="{{../name}}" class="btn btn-success btn-xs iPressShare">Save &nbsp<i class="iPressIconShare fas fa-share-alt"></i></button></td>
        </text>
</tr>
{{/each}}