从子视图中的复选框更改访问父视图模型

Question

我有以下视图，它呈现子视图的 2 个副本，您可以看到它们绑定到父视图模型上的 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>

重复视图非常简单，只有 2 个复选框绑定到子视图模型上的属性

<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>

这是上面使用的简化视图模型，首先是父视图，绑定到顶视图

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
    }
}

这是绑定到上述两个重复视图的PersonViewModel

function PersonViewModel(){
    var self = this;

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

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

我读过关于淘汰赛extenders 和custom bindings 的文章，但我不确定我是否过于复杂了。

我尝试在子视图模型上扩展 ownsMainHome 的 observable：

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 是我定位绑定上下文的尝试！我也试过了

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

当然target 是一个代表订阅者的对象，而不是绑定。

所以我有点卡住了。

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.