在复选框中访问父视图模型会在子视图中更改
我有以下视图，它们呈现子视图的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函数。
我已阅读关于淘汰赛扩展程序和自定义绑定，但我不知道这只是过分复杂。
我试图在child viewmodels上扩展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当然是代表订户的对象，而不是绑定。
所以我有点卡住了。
有很多方法可以解决这个问题。 这里有三个解决方案：
您可以使用event绑定来订阅更改事件并调用您的方法：
<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。
链接地址: http://www.djcxy.com/p/50143.html上一篇: Accessing a parent viewmodel from a checkbox change within a child view