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

Question

我一直在使用 jquery 和模板，并且拼凑了一个简单的模板绑定(bind)系统:

<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" }}

并使用更自然的绑定(bind)语法，例如:

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

直接使用 JS 或 jquery 就可以了。我知道一些更复杂的数据绑定(bind)工具(例如 Angular)提供了这些功能，但是某些数据绑定(bind)插件的复杂性让我感到头晕。任何基于节点的东西都是正确的。

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

Answer 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);