[英]How to output object's parameter name in js templating engines (mustache, underscore)
[英]mustache templating an object without using index name
我有一个看起来像下面代码的对象:我不知道它们可能变化的内部对象的名称,我如何创建一个不关心名称但通过嵌套的卡片阵列循环的模板?
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中按摩您的模型。 只需将“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一起工作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.