Knockout.js 如何淘汰JS嵌套模板

我试图弄明白为什么这个嵌套模板不显示任何内容。我有两个类Foo/Bar，ViewModel有一个Foo的可观察数组，Foo有一个Bar的集合

目前我看到的只是Foo项目

即

• 某物

而不是

• 某物
  • 分项

列表项

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

      }
    });

var Foo=函数（）{
var self=这个；
self.Name=ko.observable（'someitem'）；
self.Bar=ko.observearray（[new Bar（）]）；
self.haschilds=ko.可观察（假）；
self.addBar=函数（）{
自杆推（新杆（））；
};
self.removeBar=函数（参数）{
自行拆除（参数）；
};
自杆推（新杆（））；
}
变量条=函数（）{
var self=这个；
self.Name=ko.observable（'子项'）；
}
var ViewModel=函数（）{
var self=这个；
self.foos=ko.observearray（[new Foo（）]）；
self.addFoo=函数（）{
self.foos.push（new Foo（））；
};
self.removeFoo=函数（参数）{
self.foos.remove（参数）；
};
}
$.ajax({
url:“@url.Action（“AddFoos”）”，
键入：“GET”，
async:false，
contentType:'应用程序/json'，
成功：功能（结果）{
应用绑定（新视图模型（结果））；
}
});

---

提前谢谢

由于某种原因，敲除在

li

中绑定

文本时出现问题。我以前遇到过这个问题。它最终会覆盖节点上的所有其他内容，在您的情况下，这是一个内部
ul
。您可以使用
span
或以下任何其他文本元素解决此问题：

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



这是您的代码在一个文件夹中

值得注意的是，ajax调用将失败，因为ViewModel没有获取结果的参数

另外，在这样的函数中调用
applyBindings
是不好的，因为如果调用两次，就会导致错误。如果调用一次，则稍后对viewmodel所做的更新将自动发送到UI。这是一种淘汰赛的东西=）

更新：

进一步考虑后，这可能不是特定于
li
节点的。
文本
绑定可能通过覆盖其绑定到的任何节点的内容来工作，因此文本以外的任何内容也将被覆盖。这可能是有意为之。
来自敲除源：
text
绑定使用
ko.util.setTextContent（）
，其中包含此注释
我们需要正好有一个子节点：文本节点。如果没有子节点、多个子节点或不是文本节点，我们将清除所有内容并创建单个文本节点。