Question

我最近开始使用Handlebars.js，到目前为止我很喜欢它！

在我当前的项目中，我在data属性中存储了一堆文字值。我想知道是否有一种方法可以将完整的JSON对象存储在标签中供以后使用。

当前

    {{#each this}}
        <tr data-id="{{Id}}"
            data-prod-code="{{ProductCode1}}"
            data-gague="{{Gague}}"
            data-rvalue="{{RValue}}"
            data-density="{{Density}}"
            data-fhaclass="{{FHAClass}}"
            data-yards="{{Yards}}"
            data-netting="{{Netting}}"
            data-film="{{Film}}"
            data-compressed="{{Compressed}}"
            data-color="{{Color}}"
            data-cfd="{{CFD}}"
            data-elongation="{{Elongation}}"
            data-tensilestrength="{{TensileStrength}}"
            data-compressionset="{{CompressionSet}}"
            data-title="{{Title}}">
                <td>{{ProductCode1}}</td>
                <td>{{Title}}</td>
                <td>{{Gague}}</td>
        </tr>
    {{/each}}

所需

    {{#each this}}
        <tr data-id="{{Id}}"
            data-object="{{FULL JSON for current object in iteration}}">
                <td>{{ProductCode1}}</td>
                <td>{{Title}}</td>
                <td>{{Gague}}</td>
        </tr>
    {{/each}}

以防它是相关的......

数据从MVC4操作返回，并从$.get()请求调用。

我想要这样做的原因是我可以使用单独的Handlebars模板，而无需重建data属性中的数据。

在这里的另一篇文章中，他们建议使用jQuery将数据存储在其内部的K，V对中。除非它有一些邪恶的清理能力，我不知道我会避免这样，所以它的内存使用量不会急剧上升。存储在data属性中的数据会根据搜索词进行频繁交换，因此我不希望它存储在jQuery对象中（除非这是100％毫无根据的问题）。

Answer 1

解决方案：

我最终需要制作一个Handlebars帮手。

Handlebars.registerHelper('getObjectJSON', function() {
    return JSON.stringify(this);
});

然后我的Handlebars模板看起来像这样......

<script id="product-row-template" type="text/x-handlebars-template">
    {{#each this}}
        <tr data-id="{{Id}}"
            data-title="{{Title}}"
            data-productcode1="{{ProductCode1}}"
            data-object='{{getObjectJSON}}'>
                <td class="addProductToCart">{{ProductCode1}}</td>
                <td class="addProductToCart">{{Title}}</td>
                <td class="addProductToCart">{{Gague}}</td>
                <td class="viewProductDetail" style="width: 5%"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></td>
        </tr>
    {{/each}}
</script>

这允许我将该数据对象传递给其他Handlebars模板以用于模态/等...

$("#modalBodyAndFooter").html(marketingModalTemplate($(this).closest("tr").data("object")));

Handlebars.js在数据标记中嵌入了文字json对象

1 个答案: