3

このネストされたテンプレートに何も表示されない理由を理解しようとしています。Foo/Bar の 2 つのクラスがあり、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));

      }
    });

前もって感謝します！

4

1 に答える 1

6

Knockout には、何らかの理由で のバインドtextに問題があります。li私は以前にこの問題に遭遇しました。それはあなたの場合は inner であるノードに行くべき他のすべてを上書きすることになりますul。spanこれは、または次のようなテキスト要素で修正できます。

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

これが作業中のコードですfiddle。

ViewModel には結果を受け取るパラメータがないため、ajax 呼び出しは失敗します。

また、applyBindingsそのような関数を呼び出すのは良くありません。2 回呼び出されるとエラーが発生するからです。一度呼び出すと、後でビューモデルに加えられた更新が自動的に UI に送信されます。それは一種のノックアウトのものです=）

アップデート：

さらに検討すると、これはおそらくliノードに固有のものではありません。おそらく、textバインド先のノードのコンテンツを上書きすることでバインドが機能するため、テキスト以外のコンテンツも上書きされます。おそらく意図的なものです。

于 2012-08-02T01:31:18.307 に答える