Knockout如何订阅其他视图模型的属性？

我使用淘汰赛组件构建了不同的局部视图搜索视图拥有自己的视图模型：Knockout如何订阅其他视图模型的属性？

搜索字段
过滤

所以，搜索领域的视图模型看起来是这样的：

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中更改查询可见时，我希望在SearchVM中更改currentQuery可观察。

对于currentCategory也是如此。

比方说，我的搜索视图的样子：

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

如何我后来听在搜索领域组件的查询可观察和过滤组件的currentCategory观察到，这样的SearchVM注意到这些变化？

来源

2015-06-22 Ekenstein

听起来像其中一个人需要知道另一个。确定哪种方式最符合您的需求，然后将一个视图模型传递到另一个视图模型中 –

这是如何在构建组件时实现的？ – Ekenstein

我不确定（因此评论而不是答案），组件是淘汰赛的一部分，我还没有探讨任何细节！ –

听起来好像你想在“SearchFieldVM”类的实例上的“query”属性引用“SearchVM”类的实例上的“currentQuery”属性，即当“query”被更新时，然后“currentQuery “也应该更新。

你可以通过可观察的参考到每个视图模型的构造方法使用PARAM这样实现的：

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>

否则，如果“SearchVM”是嵌套在它的另外两个组成部分，那么你的容器视图模型可以使用此方法fiddle

来源

2015-06-22 13:46:10

Knockout如何订阅其他视图模型的属性？

回答

相关问题