使用 javascript 将对象绑定到模板答案

【问题标题】：binding object to templates with javascript使用 javascript 将对象绑定到模板
【发布时间】：2017-07-05 06:08:41
【问题描述】：

我一直在玩 jquery 和模板，我拼凑了一个简单的模板绑定系统：

<script type="text/template" id="Template">
    <div>{0}</div>
</script>

还有……

var buffer = '';
var template = $("#Template").html();

response.Data.forEach(function(arrayElement)
{
    buffer += template.format(arrayElement.p1,);
});

$("#ListOutput").html(buffer);

我的问题是：有没有更自然的方式可以获取 JSON 对象，例如：

{"user": { "id": "1","name": "bob" }}

并使用更自然的绑定语法，例如：

<script type="text/template" id="Template">
    <div>{user.name}</div>
</script>

直接的 JS 或 jquery 会是个好主意。我知道一些更复杂的数据绑定工具（如 Angular）提供了这些功能，但是一些数据绑定插件的复杂性让我头晕目眩。任何基于节点的东西都是正确的。

是否有一些我不知道的原生功能可以让这变得简单？

【问题讨论】：

标签： javascript jquery json data-binding

【解决方案1】：

如果你可以使用 ES2015“模板字符串”。

<script type="text/template" id="Template">
    <div>${user.name}</div>
</script>

你还没有添加响应数组，所以我假设它为

[
 {"user": { "id": "1","name": "bob" }},
 {"user": { "id": "2","name": "Some Name" }}
]

var buffer = '';
var template = $("#Template").html();
response.Data.forEach(function(arrayElement) {
    var user = arrayElement.user;
    buffer += eval('`' + template + '`');
});

$("#ListOutput").html(buffer);

【讨论】：