与doT.js嵌套列表(从嵌套数组/对象)
问题描述:
有没有办法用doT.js生成嵌套列表?不幸的是,我的代码只遍历数组中的第一个对象(g1),并忽略了以下所有内容。有什么办法可以用doT.js来解决这个问题吗?与doT.js嵌套列表(从嵌套数组/对象)
结果应该是这样的:
G1
T11
T12
T13
G2
T21
T22
T23
$(document).ready(function() {
var data_simple = {
level1: [{
name: 't1'
}, {
name: 't2'
}, {
name: 't3'
}]
};
var data_complex = {
level1: [{
name: 'g1',
data: [{
name: 't11'
}, {
name: 't12'
}, {
name: 't13'
}]
}, {
name: 'g2',
data: [{
name: 't21'
}, {
name: 't22'
}, {
name: 't23'
}]
}]
};
var compiled_tpl_simple = doT.template($('[data-template="simple"]').html());
var compiled_tpl_complex = doT.template($('[data-template="complex"]').html());
var result_simple = compiled_tpl_simple(data_simple);
var result_complex = compiled_tpl_complex(data_complex);
$('#output_simple').append(result_simple);
$('#output_complex').append(result_complex);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/dot/1.0.3/doT.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script data-template="simple" type="text/x-dot-template">
\t <strong>Beg simple</strong><br>
\t {{~it.level1 :element:index}}
\t \t {{=element.name}}<br>
\t {{~}}
<strong>End simple</strong>
</script>
<script data-template="complex" type="text/x-dot-template">
\t <strong>Beg complex</strong><br>
\t {{~it.level1 :group:index}}
\t {{=group.name}}<br>
{{~group.data :element:index}}
\t {{=element.name}}<br>
{{~}}
\t {{~}}
<strong>End complex</strong>
</script>
<div id="output_simple">
</div>
<div id="output_complex">
</div>
答
为了解决在嵌套列表这个问题变化指数的名称。
<script data-template="complex" type="text/x-dot-template">
<strong>Beg complex</strong><br>
{{~it.level1 :group:index}}
{{=group.name}}<br>
{{~group.data :element:index2}}
{{=element.name}}<br>
{{~}}
{{~}}
<strong>End complex</strong>
</script>