KnockoutJS 订阅多个具有相同回调操作的 observables

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

所以，你获得了两个 observables 的依赖关系并设置了你的标志。

此外，如果您正在寻找类似“脏”标志的东西，那么您可能会考虑类似：http://www.knockmeout.net/2011/05/creating-smart-dirty-flag-in-knockoutjs.html。这个想法是你使用一个计算的 observable，它在一个对象上调用 ko.toJS() 来解开它的所有 observables。

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

Typescript 版本用于对 Observable 列表中的任何 Observable 执行相同的回调。

此解决方案适用于以下类型：

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

这种方法的好处：

1. 如果将 Observable 添加到您的 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;
   }