Question

我在javascript knockouts中遇到了$ 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>

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

1 个答案: