0

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

  • 搜索字段
  • 筛选

因此，搜索字段视图模型看起来像这样：

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 注意到这些更改？

4

1 回答 1

0

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

您可以通过使用参数将 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 };
}

假设您有一些其他视图模型表示包含这些组件实例的视图，我们可以在其上创建一个属性来表示 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”是在其中嵌套其他两个组件的容器视图模型，那么您可以使用这个小提琴中的方法

于 2015-06-22T13:46:10.070 回答