3

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

目前我看到的只是 Foo 项目

IE

  • 某项

代替

  • 某项

    • 子项

项目清单

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

      }
    });

提前致谢！

4

1 回答 1

6

出于某种原因，淘汰赛text在's 中存在绑定问题。li我以前遇到过这个问题。它最终会覆盖应该在节点上进行的所有其他内容，在您的情况下是一个内部ul. 您可以使用以下span文本元素或任何其他文本元素来解决此问题：

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

这是您在工作小提琴中的代码。

需要注意的是，您的 ajax 调用将失败，因为您的 ViewModel 没有获取结果的参数。

此外，调用applyBindings这样的函数也很糟糕，因为如果它被调用两次，就会导致错误。如果您调用它一次，稍后对视图模型所做的更新将自动发送到 UI。那是淘汰赛的事情=）

更新：

经过进一步考虑，这可能不是特定于li节点的。绑定可能text通过覆盖它所绑定的任何节点的内容来工作，因此文本以外的任何内容也将被覆盖。这可能是故意的。

于 2012-08-02T01:31:18.307 回答