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

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