KnockoutJS訂閱具有相同回調操作的多個observable

Question

我在KnockoutJS中有一個模型類，它有多個我想訂閱的值。 每個訂閱都將執行相同的任務，如下所示：

function CaseAssignmentZipCode(zipCode, userId, isNew) {
  var self = this;
  self.zipCode = ko.observable(zipCode);
  self.userId = ko.observable(userId);
  self.isNew = isNew;
  self.isUpdated = false;

  self.zipCode.subscribe(function () { self.isUpdated = true; });
  self.userId.subscribe(function () { self.isUpdated = true; });
}

有沒有辦法將這兩個調用結合起來訂閱，以便我可以使用一個訂閱來“監視”這兩個值？

Answer 1

您可以為此目的使用計算的observable。 您只需要確保在read函數中訪問每個observable的值。 會是這樣的：

ko.computed(function() {
   self.zipCode();
   self.userId();
   self.isUpdated = true;
});

因此，您依賴於兩個observable並設置您的標志。

此外，如果您正在尋找類似“臟”標志的東西，那么您可能會考慮以下內容： http ： //www.knockmeout.net/2011/05/creating-smart-dirty-flag-in-knockoutjs.html 。 這個想法是你使用一個計算的observable調用對象上的ko.toJS（）來解包它的所有可觀察對象。

Answer 2

你不想復制處理函數的主體嗎？ 將其解壓縮到變量。

function CaseAssignmentZipCode(zipCode, userId, isNew) {
  var self = this;
  self.zipCode = ko.observable(zipCode);
  self.userId = ko.observable(userId);
  self.isNew = isNew;
  self.isUpdated = false;

  var handler = function () { self.isUpdated = true; };

  self.zipCode.subscribe(handler);
  self.userId.subscribe(handler);
}

Answer 3

通過將依賴項列表轉換為循環來改進將函數體重構為變量：

function CaseAssignmentZipCode(zipCode, userId, isNew) {
  var self = this;
  self.zipCode = ko.observable(zipCode);
  self.userId = ko.observable(userId);
  self.isNew = isNew;
  self.isUpdated = false;

  var handler = function () { self.isUpdated = true; };

  ko.utils.arrayForEach([self.zipCode, self.userId], function(obs) {
    obs.subscribe(handler);
  });
 } 

Answer 4

您可以為此目的創建某種擴展。 簡單的例子：

function subscribeMany(callback, observables) {    
    for (var i = 0; i < observables.length; i++) {
        observables[i].subscribe(callback);
    }
}

用法：

var name = ko.observable();
var email = ko.observable();

var callback = function(value) {
    console.log(value);
};

subscribeMany(callback, [name, email]);

name('test 1')
email('test 2')

Answer 5

用於在Observable列表中的任何Observable上執行相同回調的Typescript版本。

此解決方案適用於以下類型：

1. KnockoutObservableArray<KnockoutObservable<T>>
2. KnockoutObservable<KnockoutObservable<T>[]>
3. KnockoutObservable<T>[]

這種方法的好處：

1. 如果Oblockable被添加到您的KnockoutObservableArray那么將檢測到更改，並且訂閱函數也將添加到該Observable。

2. 相同的解決方案可用於許多不同類型，並為您處理類型。

    function subscribeMany<T>( observables: KnockoutObservableArray<KnockoutObservable<T>> | KnockoutObservable<KnockoutObservable<T>[]> | KnockoutObservable<T>[], callback: (v: T) => void ): KnockoutObservableArray<KnockoutObservable<T>> | KnockoutObservable<KnockoutObservable<T>[]> | KnockoutObservable<T>[] { function _subscribeMany<T>( observables: KnockoutObservableArray<KnockoutObservable<T>> | KnockoutObservable<KnockoutObservable<T>[]> | KnockoutObservable<T>[], callback: (v: T) => void): void { if (_isObservableArray<T>(observables)) { _subcribeAndRun(observables, (array) => { array.forEach((observable) => { observable.subscribe(callback); }); }); } else { ko.unwrap(observables).forEach((observable) => { observable.subscribe(callback); }); } } function _isObservableArray<T>(observables: KnockoutObservableArray<KnockoutObservable<T>> | KnockoutObservable<KnockoutObservable<T>[]> | KnockoutObservable<T>[]): observables is KnockoutObservableArray<KnockoutObservable<T>> | KnockoutObservable<KnockoutObservable<T>[]> { return "subscribe" in observables; } function _subcribeAndRun<T>(o: KnockoutObservable<T>, callback: (v: T) => void): KnockoutObservable<T> { o.subscribe(callback); callback(o()); return o; } _subscribeMany<T>(observables, callback); return observables; }