Question

我有一个看起来像下面代码的对象：我不知道它们可能变化的内部对象的名称，我如何创建一个不关心名称但通过嵌套数组循环的模板卡？

Cards: {
DynamicName2: [..]
DynamicName3: [..]
DynamicName4: [..]
DynamicName5: [..]
DynamicName6: [..]

}

模板

<script type="mustache/x-tmpl" id="pack_tmpl">
{{#Cards}}
 {{.}}
//foreach inner object do this:
<ul>
</ul>

{{/Cards}}
</script>

Answer 1

您必须先在Javascript中按摩您的模型。只需将“Cards”的每个命名属性转换为数组条目即可。然后在渲染时将新模型传递给模板：

function extractDynamicCards(model) {
  var cardModel = [];
  for (var dn in model.Cards) {
    cardModel.push(model.Cards[dn]);
  }
  return {Cards: cardModel};
}

EDIT 这是脚本之前和之后的脚本

<script type="mustache/x-tmpl" id="pack_tmpl1">
<ul>
    <li>{{Cards.DynamicName2.d}}</li>
    <li>{{Cards.DynamicName3.d}}</li>
</ul>
</script>

<script type="mustache/x-tmpl" id="pack_tmpl2">
<ul>
    {{#Cards}}
      <li>{{d}}</li>
    {{/Cards}}
</ul>
</script>

<h2>Result 1</h2>
<div id="result1"></div>

<h2>Result 2</h2>
<div id="result2"></div>

以下数据：

<script type="text/javascript">
var model = {
  Cards: {
    DynamicName2: { d: "data-2" },
    DynamicName3: { d: "data-3" },
    DynamicName4: { d: "data-4" },
    DynamicName5: { d: "data-5" },
    DynamicName6: { d: "data-6" },
  }
}

function extractDynamicCards(model) {
  var cardModel = [];
  for (var dn in model.Cards) {
    cardModel.push(model.Cards[dn]);
  }
  return {Cards: cardModel};
}

var source1   = $("#pack_tmpl1").html();
var template1 = Hogan.compile(source1);
$('#result1').html(template1.render(model));

var source2   = $("#pack_tmpl2").html();
var template2 = Hogan.compile(source2);
$('#result2').html(template2.render(extractDynamicCards(model)));
</script>

您可以看到这一切都与此JSFiddle

一起使用

小胡子不使用索引名称模板对象

1 个答案: