knockout.js - $parent 绑定(bind)不能像我想的那样工作，为什么？

Question

我对 javascript knockout 中的 $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 绑定(bind)让我进入了我的 AppVM，它是我的全能 View 模型，而不是返回到我的 PersonCollectionInstance。

这就是为什么我需要这样做:

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

谁能向我解释为什么 $parent 让我回到我强大的 View 模型而不是我的 AddItem 所在的 PersonCollectionInstance？

Answer 1

你需要写 data-bind="click: $parent.PersonCollectionInstance.AddItem" 因为你定义了你的 with 是这样的:

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

所以您在 with 绑定(bind)中降低了两个级别，因为您访问了一个嵌套属性。但是 $parent 仍然指向您的主视图模型，因为 knockout 无法跟踪您的嵌套属性并且它不会为您创建嵌套上下文。

因此可以使用两个 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>

如果你无论如何都使用两个 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>