綁定對象到模板使用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);