嵌套模板

Question

我有以下代码：

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。事情是我不想让它在没有显示相关属性的情况下工作。我只想使嵌套模板工作。

Answer 1

这似乎更接近你想要完成的任务：

<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); 

参见this fiddle