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试图找到bindingcontext！我也试过

 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。

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

1 个答案: