嵌套模板

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