Question

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

搜索字段
过滤

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

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 };
}

我有一个搜索VM：

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中的observable查询时，我希望更改SearchVM中的currentQuery observable。

currentCategory也是如此。

让我们说我的搜索视图如下：

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

然后我如何监听搜索字段组件的查询可观察和过滤组件的currentCategory observable，以便SearchVM注意到这些更改？

Answer 1

听起来你想要＆＃34;查询＆＃34; ＆＃34; SearchFieldVM＆＃34;的实例上的属性类引用＆＃34; currentQuery＆＃34; ＆＃34; SearchVM＆＃34;的实例上的属性类，即＆＃34;查询＆＃34;然后更新＆＃34; currentQuery＆＃34;也应该更新。

您可以通过使用param将observable的引用传递到每个视图模型的构造函数中来实现此目的：

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 };
}

假设您有一些其他视图模型表示包含这些组件的实例的视图，我们可以在其上创建一个属性来表示此共享的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>

否则，如果＆＃34; SearchVM＆＃34;是容器视图模型，它将其他两个组件嵌入其中，然后您可以使用此fiddle

中的方法

淘汰赛如何订阅其他视图模型的属性？

1 个答案: