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

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属性重建data 。

在这里的另一篇文章中，他们建议使用jQuery将数据存储在其内部K，V对中。 除非它具有某些我不知道的邪恶清除功能，否则我将避免这种情况，以免其内存使用量激增。 data属性中存储的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")));