从另一个视图模型观察可观察到的 KO
observe KO observable from another viewmodel
所以我有两个视图模型相互配合
var viewModel1 = function(){
this.messageForVM2 = ko.observable("");
this.message = ko.observable("Hello this is vm1")
};
var viewModel2 = function(vm1){
this.message = ko.observable(vm1.messageForVM2());
};
var masterVM = (function(){
this.viewModel1 = new viewModel1(),
this.viewModel2 = new viewModel2(this.viewModel1);
})();
ko.applyBindings(masterVM)
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<h4>View Model 1</h4>
<div data-bind="with: viewModel1">
<p data-bind="text: messageForVM2"></p>
<input data-bind="value: messageForVM2, valueUpdate: 'input'" />
</div>
<h4>View Model 2</h4>
<div data-bind="with: viewModel2">
<!-- ko if: message() === "hello" -->
<p data-bind="text:message"></p>
<!-- /ko -->
</div>
(也在这边http://jsfiddle.net/ceryb9pc/)
我希望 viewmodel2 数据绑定仅在 "hello" 是 viewmodel1 中的可观察值时显示。这有效,但我希望它在 viewmodel1 输入中更新值时起作用。
在我的示例中,仅在以下情况下有效:
this.messageForVM2 = ko.observable("hello");
但需要删除:
this.messageForVM2 = ko.observable();
您需要将第一个视图模型的 Observable 分配给第二个视图模型的 message
变量。否则它只会在第一次加载时设置。
变化:
this.message = ko.observable(vm1.messageForVM2());
收件人:
this.message = vm1.messageForVM2;
这样,this.message
是对 vm1.messageForVM2
的引用,这意味着两个变量现在共享相同的值。
var viewModel1 = function(){
this.messageForVM2 = ko.observable("");
this.message = ko.observable("Hello this is vm1")
};
var viewModel2 = function(vm1){
this.message = vm1.messageForVM2;
};
var masterVM = (function(){
this.viewModel1 = new viewModel1(),
this.viewModel2 = new viewModel2(this.viewModel1);
})();
ko.applyBindings(masterVM)
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<h4>View Model 1</h4>
<div data-bind="with: viewModel1">
<p data-bind="text: messageForVM2"></p>
<input data-bind="value: messageForVM2, valueUpdate: 'input'" placeholder="Enter 'hello' here" />
</div>
<h4>View Model 2</h4>
<div data-bind="with: viewModel2">
<!-- ko if: message() === "hello" -->
<p data-bind="text:message"></p>
<!-- /ko -->
</div>
所以我有两个视图模型相互配合
var viewModel1 = function(){
this.messageForVM2 = ko.observable("");
this.message = ko.observable("Hello this is vm1")
};
var viewModel2 = function(vm1){
this.message = ko.observable(vm1.messageForVM2());
};
var masterVM = (function(){
this.viewModel1 = new viewModel1(),
this.viewModel2 = new viewModel2(this.viewModel1);
})();
ko.applyBindings(masterVM)
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<h4>View Model 1</h4>
<div data-bind="with: viewModel1">
<p data-bind="text: messageForVM2"></p>
<input data-bind="value: messageForVM2, valueUpdate: 'input'" />
</div>
<h4>View Model 2</h4>
<div data-bind="with: viewModel2">
<!-- ko if: message() === "hello" -->
<p data-bind="text:message"></p>
<!-- /ko -->
</div>
(也在这边http://jsfiddle.net/ceryb9pc/)
我希望 viewmodel2 数据绑定仅在 "hello" 是 viewmodel1 中的可观察值时显示。这有效,但我希望它在 viewmodel1 输入中更新值时起作用。
在我的示例中,仅在以下情况下有效:
this.messageForVM2 = ko.observable("hello");
但需要删除:
this.messageForVM2 = ko.observable();
您需要将第一个视图模型的 Observable 分配给第二个视图模型的 message
变量。否则它只会在第一次加载时设置。
变化:
this.message = ko.observable(vm1.messageForVM2());
收件人:
this.message = vm1.messageForVM2;
这样,this.message
是对 vm1.messageForVM2
的引用,这意味着两个变量现在共享相同的值。
var viewModel1 = function(){
this.messageForVM2 = ko.observable("");
this.message = ko.observable("Hello this is vm1")
};
var viewModel2 = function(vm1){
this.message = vm1.messageForVM2;
};
var masterVM = (function(){
this.viewModel1 = new viewModel1(),
this.viewModel2 = new viewModel2(this.viewModel1);
})();
ko.applyBindings(masterVM)
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<h4>View Model 1</h4>
<div data-bind="with: viewModel1">
<p data-bind="text: messageForVM2"></p>
<input data-bind="value: messageForVM2, valueUpdate: 'input'" placeholder="Enter 'hello' here" />
</div>
<h4>View Model 2</h4>
<div data-bind="with: viewModel2">
<!-- ko if: message() === "hello" -->
<p data-bind="text:message"></p>
<!-- /ko -->
</div>