mustache 模板对象而不使用索引名称答案

【问题标题】：mustache templating an object without using index namemustache 模板对象而不使用索引名称
【发布时间】：2014-02-21 22:56:25
【问题描述】：

我有一个类似于下面代码的对象：我不知道它们可能会变化的内部对象的名称，我如何创建一个不关心名称但循环遍历嵌套数组的模板卡？

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

}

模板

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

{{/Cards}}
</script>

【问题讨论】：

标签： javascript mustache

【解决方案1】：

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

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一起工作

【讨论】：

所以你的意思是只有一个空的卡片数组，看起来像：cards { [],[],[],[] }
这是我所说的一个例子：jsfiddle.net/Kv3m8。结果是一个对象数组，如下所示：model = { Cards: [{},{},{}] }