如何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绑定通过覆盖任何绑定的节点的内容而工作，因此除文本以外的任何内容也将被覆盖。这可能是故意的。