JsRender API和打印陣列

Question

我想使用JsRender API。原因是我正在尋找一種解決方案，我只需要執行一次$("#persons").html(html);。

無論如何，我的代碼此刻不工作。

這裏是我的JavaScript/jQuery代碼使用數組：

var person_data = []; 

person_data[0]["number"] = 1; 
person_data[0]["firstName"] = "John"; 
person_data[0]["lastName"] = "Doe"; 
person_data[0]["age"] = 46; 

person_data[1]["number"] = 2; 
person_data[1]["firstName"] = "Ben"; 
person_data[1]["lastName"] = "Davidson"; 
person_data[1]["age"] = 25; 

var html_code = $("#personTemplate").render(person_data); 

$("#persons").html(html_code); 

這是我的HTML代碼：

<div id="persons"> 
</div> 

<script id="personTemplate" type="text/x-jsrender"> 
    <table id="person{{:number}}"> 
     <tr><td>{{:firstName}}</td></tr> 
     <tr><td>{{:lastName}}</td></tr> 
     <tr><td>{{:age}}</td></tr> 
    </table> 
</script> 

所以，我想結果是這樣的：

<div id="persons"> 
    <table id="person1"> 
    <tr><td>John</td></tr> 
    <tr><td>Doe</td></tr> 
    <tr><td>46</td></tr> 
    </table> 
    <table id="person2"> 
    <tr><td>Ben</td></tr> 
    <tr><td>Davidson</td></tr> 
    <tr><td>25</td></tr> 
    </table> 
</div> 

如果除了使用JsRender API執行作業而不執行$("#persons").html(html); mor我想了解更多關於他們的信息。

Answer 1

您需要首先正確初始化數組。您的代碼將在線路person_data[0]["number"] = 1;上產生JavaScript錯誤，甚至無法接到對JsRender的調用。

由var person_data = [{}, {}];替換第一行或更換所有的數組初始化代碼：

var person_data = [{ 
    number: 1, 
    firstName: "John", 
    lastName: "Doe", 
    age: 46 
}, { 
    number: 2, 
    firstName: "Ben", 
    lastName: "Davidson", 
    age: 25 
}]; 

，一切都應該很好地工作，以如下的單呼：

var html_code = $("#personTemplate").render(person_data); 

$("#persons").html(html_code);.