Knockout 如何订阅另一个视图模型的属性？答案

【问题标题】：Knockout How can I subscribe to another view model's properties?Knockout 如何订阅另一个视图模型的属性？
【发布时间】：2015-09-07 21:22:55
【问题描述】：

我正在使用剔除组件来构建具有不同部分视图的搜索视图，这些部分视图具有自己的视图模型：

搜索字段
过滤器

因此，搜索字段视图模型如下所示：

define(["knockout", "text!./search-field.html"], function (ko, templateMarkup) {
    function SearchFieldVM(params) {
        this.query = ko.observable("");
    }

    return { viewModel: SearchFieldVM, template: templateMarkup };
}

过滤器视图模型看起来像：

define(["knockout", "text!./filter.html"], function (ko, templateMarkup) {
    function FilterVM(params) {
        this.categories = ko.observableArray();
        this.currentCategory = ko.observable();
    }

    return { viewModel: FilterVM, templateMarkup };
}

然后我有一个搜索虚拟机：

define(["knockout", "text!./search.html"], function(ko, templateMarkup) {
    function SearchVM(params) {
        this.currentQuery = ko.observable();
        this.currentCategory = ko.observable();
    }

    return { viewModel: SearchVM, template: templateMarkup };
}

好的，事情就是这样。每当更改 SearchFieldVM 中可观察的查询时，我希望更改 SearchVM 中可观察的 currentQuery。

currentCategory 也是如此。

假设我的搜索视图如下所示：

<search-field></search-field>
<filter></filter>

然后我如何才能监听搜索字段组件的查询可观察对象并过滤组件的 currentCategory 可观察对象，以便 SearchVM 注意到这些变化？

【问题讨论】：

听起来他们中的一个需要了解另一个。确定哪种方式最符合您的需求，然后将一个视图模型传递给另一个视图模型的参数
我在构造组件时是如何实现的？
我不确定（因此是评论而不是回答），组件是淘汰赛的一部分，我还没有详细探索过！
我也一样。因此需要一个用法的例子^^
我之前用过一个叫knockout postbox的插件来实现模型之间的通信。 github.com/rniemeyer/knockout-postbox

标签： knockout.js observable knockout-3.0 knockout-components

【解决方案1】：

听起来您希望“SearchFieldVM”类实例上的“query”属性引用“SearchVM”类实例上的“currentQuery”属性，即当“query”更新时“currentQuery”也应该更新。

您可以通过使用如下参数将可观察对象的引用传递给每个视图模型的构造函数来实现此目的：

define(["knockout", "text!./search-field.html"], function (ko, templateMarkup) {
    function SearchFieldVM(params) {
        this.query = params.refToSomeObservable;
    }

    return { viewModel: SearchFieldVM, template: templateMarkup };
}

define(["knockout", "text!./search.html"], function(ko, templateMarkup) {
    function SearchVM(params) {
        this.currentQuery = params.refToSomeObservable;
        this.currentCategory = ko.observable();
    }

    return { viewModel: SearchVM, template: templateMarkup };
}

假设您有一些其他视图模型表示包含这些组件实例的视图，我们可以在其上创建一个属性来表示 this 共享的 observable。

var MyViewModelThatRepresentsSomeContainerOfComponents = {
name: ko.observable("whats your name?")
searchQuery: ko.observable('default query maybe?')

}

然后在你的标记中你可以这样做：

<div>
    <input type="text" data-bind="value: name" />
    <search-field params="refToSomeObservable: searchQuery"></search-field>
    <filter></filter>
    <search params="refToSomeObservable: searchQuery"></search>
</div>

否则，如果“SearchVM”是在其中嵌套其他两个组件的容器视图模型，那么您可以使用fiddle中的方法

【讨论】：