javascript - 使用javascript将对象绑定(bind)到模板

我一直在玩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" }}

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

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

直接的JS或jQuery将是一个主意。我知道一些更复杂的数据绑定工具（例如Angular）提供了这些功能，但是某些数据绑定插件的复杂性让我大吃一惊。任何基于节点的东西都是正确的。

有一些我不知道的本机功能可以使此操作变得容易吗？

最佳答案

如果可以使用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);