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);，我想了解更多关于它们的信息。

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

JsRender API并打印一个数组

1 个答案: