使用javascript將對象綁定到模板

Question

我一直在玩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）提供了這些功能，但是某些數據綁定插件的復雜性讓我大吃一驚。 任何基於節點的東西都是正確的。

有一些我不知道的本機功能可以使此操作變得容易嗎？

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