knockout.js - 从 subview 中的复选框更改访问父 View 模型

Question

我有以下 View ，它呈现 subview 的 2 个副本，如您所见，它们绑定(bind)到父 View 模型上的 2 个属性。

<div class="row">
    <div class="col-sm-4" data-bind="with: primaryPerson">
        <h5 data-bind="visible: $root.isMirror">You</h5>
         @{Html.RenderPartial("_PropertyQuestionnaire");}
    </div>
    <div class="col-sm-4" data-bind="visible: isMirror, with: secondaryPerson">
        <h5 data-bind="visible: $root.isMirror">Your partner</h5>
        @{Html.RenderPartial("_PropertyQuestionnaire");}
     </div>
</div>

那个重复 View 非常简单，只有 2 个复选框绑定(bind)到 subview 模型上的属性

<div class="checkbox">
    <label>
        <input type="checkbox" data-bind="checked: ownsMainHome">
        Main home
    </label>
</div>
<div class="checkbox">
    <label>
        <input type="checkbox" data-bind="checked: ownsOtherProperty">
        Other properties
    </label>
</div>

这里是上面使用的简化 View 模型，首先是父 View ，绑定(bind)到顶 View

function MainViewModel(){
    var self = this;
    self.primaryPerson = new PersonViewModel();
    self.secondaryPerson = new PersonViewModel();

    self.mainHomeChanged = function(){
        // My question (i'll get to it!!) Is about this method
    }
}

这里是绑定(bind)到上面两个重复 View 的 PersonViewModel

function PersonViewModel(){
    var self = this;

    self.ownsMainHome = ko.observable(false);
    self.ownsOtherProperty = ko.observable(false);
}

可观察的 ownsMainHome 绑定(bind)到重复 View 中的 2 个复选框之一。当它们中的任何一个发生变化时，我需要在父 View 模型中调用函数 mainHomeChanged。

我读过关于 knockout 的文章 extenders和 custom bindings但我不确定我只是把它复杂化了。

我尝试在 subview 模型上扩展 ownsMainHome 的可观察对象:

self.ownsMainHome = ko.observable(false).extend({addHomeAddress:true});

和

ko.extenders.addHomeAddress = function (target, option) {
    target.subscribe(function (newValue) {
        console.log(target);
        console.log(this);
    });
    return target;    
}

console.log 是我定位绑定(bind)上下文的尝试!我也试过了

 ko.extenders.addHomeAddress = function (target, option) {
    target.subscribe(function (newValue) {
        console.log(ko.contextFor(target));
    });
    return target;    
}

当然 target 是代表订阅者的对象，而不是绑定(bind)。

所以我有点卡住了。

Answer 1

有很多方法可以解决这个问题。这是三个解决方案:

您可以使用 event binding订阅更改事件并调用您的方法:

<input type="checkbox" data-bind="checked: ownsMainHome, 
                                  event: { change: $parent.mainHomeChanged }" />

演示 JSFiddle .

您可以将 MainViewModel 传递给您的 PersonViewModel:

self.mainHomeChanged = function(){
    alert('mainHomeChanged');
}

self.primaryPerson = new PersonViewModel(self);
self.secondaryPerson = new PersonViewModel(self);

在你的 PersonViewModel

function PersonViewModel(parent){
    var self = this;

    self.ownsMainHome = ko.observable(false);
    self.ownsOtherProperty = ko.observable(false);

    self.ownsMainHome.subscribe(parent.mainHomeChanged);
}

演示 JSFiddle .

或者您可以直接从您的 MainViewModel 订阅:

self.primaryPerson = new PersonViewModel();
self.secondaryPerson = new PersonViewModel();

self.mainHomeChanged = function(){
    alert('mainHomeChanged');
}

self.primaryPerson.ownsMainHome.subscribe(self.mainHomeChanged);
self.secondaryPerson.ownsMainHome.subscribe(self.mainHomeChanged);

演示 JSFiddle .