$ parent绑定不起作用,因为我想淘汰为什么？

Question

我在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绑定将我带到我的AppVM,这是我所有强大的视图模型,而不是回到我的PersonCollectionInstance.

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

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

任何人都可以向我解释为什么$ parent让我回到我所有强大的viewmodel而不是我的AddItem所在的PersonCollectionInstance？

Answer 1

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

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

因此,您已经在with绑定中降低了两个级别,因为您已经访问了嵌套属性.但是$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>