javascript - 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 属性重建数据。

在此处的另一篇文章中，他们建议使用 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")));