嵌套模板
问题描述:
我有以下代码:嵌套模板
function Session(name, index) {
this.Messages = [];
this.Name = name;
this.Index = index;
}
var vm = {};
vm.Sessions = ko.observableArray([new Session("Foo", 0), new Session("Bar", 1)]);
ko.applyBindings();
vm.Sessions()[0].Messages.push("Hello foo");
沿着这样的观点:
<div data-bind="template: {name: 'TopTemplate', foreach: Sessions}">
</div>
<script type="text/html" id="TopTemplate">
<p>
${$data.Name}
<ul data-bind="template: {name: 'NestedTemplate', foreach: Sessions[${$data.Index}]}"></ul>
</p>
</script>
<script type="text/html" id="NestedTemplate">
<li>
${$data}
</li>
</script>
正如你可以看到有与含阵列的对象。因此,我创建了可观察的会话数组,并且它变得可观察,包括内部属性。我想在这里显示嵌套的“中继器”。
昨天我以某种方式成功执行此脚本。有趣的是没有显示房产名称,即Sessions[${$data.Index}].Messages
。不幸的是,我删除了这个测试脚本。
现在我试图重新创建它并不起作用。
PS。事情是我不想让它在没有显示相关属性的情况下工作。我只想使嵌套模板工作。
答
这似乎更接近你想要完成的任务:
<ul data-bind="template: {name: 'TopTemplate' , foreach: Sessions}"></ul>
<script type="text/html" id="TopTemplate">
<li >
<p>${name}</p>
<ul data-bind=" template: {name: 'NestedTemplate' , foreach: $data} " style="list-style-type:circle;margin-left:15px">
</ul>
</li>
</script>
<script type="text/html" id="NestedTemplate">
{{each(prop, val) $data}}
{{if $.isArray(val) }}
<li>
<b>${prop}</b>
<ul style="list-style-type:square;margin-left:15px" >
{{each(index, arrayVal) val}}
{{each(i, mVal) arrayVal }}
<li>
<b>${i}</b> ${mVal}
</li>
{{/each}}
{{/each}}
{{else}}
<li><b>${prop}</b> : ${val}</li>
{{/if}}
{{/each}}
</script>
和代码:
var viewModel = {
Sessions : ko.observableArray([
{name:"foo",index: 0, messages:[{body:"Hello foo 1"},{body:"Hello foo 2"}]},
{name:"bar",index: 1, messages:[{body:"Hello foo 3"},{body:"Hello foo 4"}]}
])
};
// ko magic...
ko.applyBindings(viewModel);
对不起那个。这只是从编辑器复制粘贴时的不准确。所有ID均正确放置。 – Oybek
我更新了答案,但花了一些时间摆弄 –