3

javascript ノックアウトの $parent に問題があります。

私がモデルを持っている場合：

        var Person = function () {

        var self = this;

        self.person_Id = ko.observable(); 
        self.firstName = ko.observable(); 
        self.lastName = ko.observable(); 
        self.age = ko.observable(); 
        self.role = ko.observable(); 

        self.init = function (data) {

            self.person_Id(data.person_Id);
            self.firstName(data.firstName);
            self.lastName(data.lastName);
            self.age(data.age);
            self.role(data.role);
        };

    };

そしてコレクション

        var PersonCollection = function () {

        var self = this;

        self.ItemToEditOrToAdd = ko.observable(new Person());  

        self.persons = ko.observableArray();

        self.AddItem = function (item) {

            self.persons.push(item);


        };

    };

そしてhtml

                <div id="new" data-bind="with: PersonCollectionInstance.ItemToEditOrToAdd">

                <p>Firstname: <input type="text" data-bind="value: firstName"/></p>
                <p>Lastname: <input type="text" data-bind="value: lastName"/></p>
                <p>Age: <input type="text" data-bind="value: age"/></p>
                <p>Role: <input type="text" data-bind="value: role"/></p>
                <button data-bind="click: $parent.PersonCollectionInstance.AddItem">Add new</button>

            </div>

html を見ると、AddItem にアクセスする自然な方法は次のように書くことです。

<button data-bind="click: $parent.AddItem">Add new</button>

$parent バインディングは、PersonCollectionInstance に戻るのではなく、強力なビュー モデルである AppVM にアクセスするため、これは機能しません。

そのため、次のようにする必要があります。

 <button data-bind="click: $parent.PersonCollectionInstance.AddItem">Add new</button>

AddItem がある PersonCollectionInstance ではなく、なぜ $parent が強力なビューモデルに戻るのか、誰か説明してもらえますか?

4

1 に答える 1

5

data-bind="click: $parent.PersonCollectionInstance.AddItem"次のように定義したため、次のように記述する必要がありますwith。

data-bind="with: PersonCollectionInstance.ItemToEditOrToAdd"`

withつまり、ネストされたプロパティにアクセスしたため、バインディングのレベルが 2 つ下がりました。ただし、$parentノックアウトはネストされたプロパティを追跡できず、ネストされたコンテキストを作成しないため、まだメイン ビュー モデルを指しています。

したがって、 two を使用して目的の結果を達成できますwith。

<div id="new" data-bind="with: PersonCollectionInstance">
  <!-- ko with: ItemToEditOrToAdd -->
    <p>Firstname: <input type="text" data-bind="value: firstName"/></p>
    <p>Lastname: <input type="text" data-bind="value: lastName"/></p>
    <p>Age: <input type="text" data-bind="value: age"/></p>
    <p>Role: <input type="text" data-bind="value: role"/></p>
    <button data-bind="click: $parent.AddItem">Add new</button>
  <!-- /ko -->
</div>

とにかく2つを使用するwith場合は、ボタンを「外側」に配置できます。

<div id="new" data-bind="with: PersonCollectionInstance">
  <!-- ko with: ItemToEditOrToAdd -->
    <p>Firstname: <input type="text" data-bind="value: firstName"/></p>
    <p>Lastname: <input type="text" data-bind="value: lastName"/></p>
    <p>Age: <input type="text" data-bind="value: age"/></p>
    <p>Role: <input type="text" data-bind="value: role"/></p>       
  <!-- /ko -->
  <button data-bind="click: AddItem">Add new</button>
</div>
于 2013-01-15T12:49:30.627 に答える