使用handlebars将json对象存储到HTML元素中

Question

如何将完整的JSON对象作为数据属性存储在HTML元素中

如何将完整的JSON对象作为数据属性存储在HTML元素中

var a = {name : "sample",age : "34"}
$.find('#someDiv").data("adata",a);

我们能否在创建模板时使用Handlebars实现相同的功能。

<div id="someDiv" data-adata="{{a}}"></div>

这是可能的吗？

- gokul

---

现在我已经将JSON字符串化并按照此处指定的方式存储了https://dev59.com/bGkv5IYBdhLWcg3w9lai，是否有任何直接使用Handlebars的方法？ - gokul

哎呀，我回答的时候没看到你的评论 :) - Diosney

如果你想存储一个指向实际对象的引用而不是 JSON 字符串，可以尝试这个类似的问题：https://dev59.com/6GnWa4cB1Zd3GeqPxidV#57313280 - Etherman

Answer 1

由于 HTML 是纯字符串，而 JSON 不是，因此无法直接在 HTML 中嵌入 JSON。

但您可以使用自定义方法将其字符串化并存储在其中，例如以下方法：

/*
 * Simple helper to stringify an object.
 * Usage: {{ JSON2string object }}
 */
Handlebars.registerHelper('JSON2string', function (object:Object) {
    return JSON.stringify(object);
});

然后，在模板中，您可以像这样使用它：

<div id="someDiv" data-adata="{{JSON2string a}}"></div>

这将有效地将JSON字符串存储在data属性中。

- Diosney