从另一个视图模型观察 KO observable答案

【问题标题】：observe KO observable from another viewmodel从另一个视图模型观察 KO observable
【发布时间】：2017-03-21 22:20:53
【问题描述】：

所以我有两个视图模型互相取用

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();

【问题讨论】：

标签： javascript knockout.js durandal

【解决方案1】：

您需要将您的第一个视图模型的 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>

【讨论】：