javascript - mustache 在不使用索引名称的情况下模板化对象

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

编辑以下是示例脚本之前和之后

<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