在 JavaScript 中为 Knockout Observable 编写类似 C# 的扩展

Question

考虑以下代码：

if (countriesLookup()) {
    countriesLookup().fill(initialData.Countries);
} else {
    const subscription = countriesLookup.subscribe(function (lookup) {
        lookup.fill(initialData.Countries);
        subscription.dispose();
    });
}

这里我有一个ko.observablecountriesLookup。如果在数据初始化时组件本身还没有初始化 (countriesLookup() == undefined)，我订阅那个 observable，当它最终获得组件时，我用初始数据执行初始化并摆脱订阅。

让我们暂时忘记这种方法会导致回调地狱等等，并考虑可能的方法使它不那么难看。

我想为 observable 编写类似 C# 的扩展，就像在使用中一样：

countriesLookup.initialize(x => x.fill(initialData.Countries));

实现应该是这样的：

ko.observable.prototype.initialize = function(initializeFunc) {
    const currentValue = ???
    if (currentValue()) {
        initializeFunc(currentValue());
    } else {
        const subscription = currentValue.subscribe(function (lookup) {
            initializeFunc(lookup);
            subscription.dispose();
        });
    }
}

显然，这是行不通的，尤其是因为我不确定是否可以在 "extension" 方法中获取 observable 的当前值。

我目前正在考虑 C# 编程，我在这方面有点精通，并且非常希望得到一些关于我应该如何编写这样的扩展的建议。

也许我应该多解释一下我的问题。我知道可以在添加到原型的方法中使用 this 检索当前值，但问题在于可观察 returns 一个函数。

比如这个

String.prototype.SayHi = function SayHi() {
    return "Hi " + this + "!";
};
"blah".SayHi();      //return "Hi blah!"

工作正常，但是这个

ko.observable.prototype.SayHi = function SayHi() {
    return "Hi " + this + "!";
};
var a = ko.observable("blah")
a.SayHi();

失败并出现以下错误：

VM543:1 Uncaught TypeError: a.SayHi is not a function at <anonymous>:1:3

我希望它添加了一些说明。

Answer 1

如果我明白你的意思，你的目标是为可观察对象添加自定义函数。
在这种情况下，您应该使用 fn 而不是 prototype.
看看这个 link：http://knockoutjs.com/documentation/fn.html

I am not sure if this is possible to get the current value of observable inside the "extension" method

并且您可以使用此方法获取可观察对象的当前值，因此您上面的示例非常接近您想要的。

ko.observable.fn.initialize = function(initializeFunc) {
  const currentValue = this;
  if (currentValue()) {
    initializeFunc(currentValue());
  } else {
    const subscription = currentValue.subscribe(function(lookup) {
      initializeFunc(lookup);
      subscription.dispose();
    });
  }
  return this;
}

var ViewModel = function() {
  this.data = ko.observable().initialize(x => console.log("Value changed to: " + x));
  this.data("100");
};

ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

==================================
注意： 有一个关于为什么使用 fn 而不是 prototype 的讨论，有人在其中指出对某些人使用 extenders 更好性能原因。
在这里阅读：https://github.com/knockout/knockout/issues/979

在 JavaScript 中为 Knockout Observable 编写类似 C# 的扩展

Writing C#-like extensions in JavaScript for Knockout Observable

javascript

knockout.js

knockout-3.0