javascript - Mustache.js - 不想更新特定的 div 表

Question

我正在使用 Mustache.js 在 html 页面中呈现表格。我有一个表格的渲染模板。 我从 json 数组获取 View 数据并呈现表格。如果数组有 5 个对象，则将在 html 页面中创建 5 个表。 现在我要求不渲染特定的表格。例如，我只想呈现 table1 和 table3。 如果我删除 json 中的其他表值，它将从 UI 中删除。但我想保留所有表但只更新两个表。 如何实现？

谢谢。

Answer 1

我认为您的解决方案不会很理想，因为 mustache.js 被设计为 logic-less模板系统。然而，我时不时地用 mustache 捏造一些这样的逻辑，所以让我们这样做吧。

您可能想在这里尝试的是在呈现模板之前向数组中的每个对象添加另一个属性(或克隆它并添加仅用于模板的属性)。因此，假设您在一个数组中有五个对象，并且只想为偶数索引的对象创建表:

var myArray = [
  {myProp: 1},
  {myProp: 2},
  {myProp: 3},
  {myProp: 4},
  {myProp: 5}
];

for (var i = 0; i < myArray.length; i++) {
  myArray[i].showTable = i % 2 === 0;
}

现在 myArray 变量应该像这样:

var myArray = [
  {myProp: 1, showTable: false},
  {myProp: 2, showTable: true},
  {myProp: 3, showTable: false},
  {myProp: 4, showTable: true},
  {myProp: 5, showTable: false}
];

您现在可以通过 mustache 中的“#”运算符利用 showTable 属性。您可以先使用“#”遍历数组，然后在“循环”内检查 showTable 属性的真值。首先，调用 Mustache.render 从模板创建 HTML，将 myArray 变量作为 TableArray 传递:

Mustache.render($('#MyTemplate').html(), { TableArray: myArray });

然后，模板本身:

<script id="MyTemplate" type="text/template>
  {{#TableArray}} <!--Iterates through array-->
    {{#showTable}} <!--Only creates HTML inside if showTable property evaluates to true-->
      <table>...</table>
    {{/showTable}}
  {{/TableArray}}
</script>