绑定对象到模板使用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" }} 

，并使用更自然箱ding 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);