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如何訂閱其他視圖模型的屬性？

回答

相關問題