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

在此处的另一个 post 中，他们建议使用 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 模板，以便在 modals/etc...

中使用

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

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

Handlebars.js embed literal json object in data tag

javascript

jquery

json

handlebars.js