Question

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

感谢。

Answer 1

我不认为你的解决方案是理想的，因为mustache.js被设计为logic-less模板系统。但是，我不时用胡子把这样的逻辑融合在一起，所以让我们这样做。

您可能希望在此处尝试的是在呈现模板之前向阵列中的每个对象添加另一个属性（或克隆它并仅为模板添加属性）。因此，我们假设您在数组中有五个对象，并且只想为偶数索引的表创建表：

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}
];

您现在可以通过＆＃34;＃＆＃34;来利用showTable属性。小胡子的操作员。您可以使用＆＃34;＃＆＃34;首先迭代数组，然后在＆＃34;循环内＃34;检查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>

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

1 个答案: