如何knockoutjs嵌套模板

Question

我想弄清楚爲什麼這個嵌套模板不顯示任何東西。我有2個班富/酒吧，視圖模型有富可觀察到的數組，和Foo有酒吧

集合目前所有我看到的是富項目

即

• someitem

，而不是

• someitem

  • 子項目

列表項

<ul data-bind="template: {name: 'TopTemplate' , foreach: foos}"></ul> 
<script type="text/html" id="TopTemplate"> 
    <li data-bind='text: Name'> 
     <ul data-bind=" template: {name: 'NestedTemplate' , foreach: bars} " style="list-style-type:circle;margin-left:15px"> 
     </ul> 
    </li> 
</script>             
<script type="text/html" id="NestedTemplate">   
    <li data-bind='text: Name'> 
    </li> 
</script> 


    var Foo = function() { 

    var self = this; 
    self.Name = ko.observable('someitem'); 

    self.bars = ko.observableArray([new Bar()]); 

    self.HasChildren = ko.observable(false); 


    self.addBar = function() { 
     self.bars.push(new Bar()); 
    }; 
    self.removeBar = function (param) { 
     self.bars.remove(param); 
    }; 
    self.bars.push(new Bar()); 

    } 
    var Bar = function() { 

    var self = this; 
    self.Name = ko.observable('subitem'); 

    } 

    var ViewModel = function() { 

    var self = this; 
    self.foos = ko.observableArray([new Foo()]); 
    self.addFoo = function() { 
     self.foos.push(new Foo()); 
     }; 
     self.removeFoo = function (param) { 
     self.foos.remove(param); 
     }; 

    } 

    $.ajax({ 
    url: '@Url.Action("AddFoos")', 
    type: 'GET', 
    async: false, 
    contentType: 'application/json', 
    success: function (result) { 

     ko.applyBindings(new ViewModel(result)); 

     } 
    }); 

提前感謝！

Answer 1

淘汰賽有一些問題因某種原因結合text在li的。我之前遇到過這個問題。它最終會覆蓋節點上的所有其他內容，在你的情況下它是內部的ul。你可以用span或任何其他文本元素這樣解決這個問題：

<li><span data-bind='text: Name'></span> 

這裏是在working fiddle你的代碼。

一張小紙條，你的AJAX調用是要失敗的，因爲你的視圖模型沒有一個paramater拿結果。

而且，在這樣的一個函數調用applyBindings是不好的，因爲如果它被調用兩次，你就會導致錯誤。如果您只調用一次，稍後對視圖模型所做的更新將自動發送到用戶界面。這就是那種淘汰賽的事情=）

更新：

經進一步考慮，這可能不是特定於li節點。這可能是text綁定通過覆蓋任何綁定的節點的內容而工作，因此除文本以外的任何內容也將被覆蓋。這可能是故意的。