使用淘汰工具陷入困境答案

【问题标题】：Spinning into trouble with knockout-utils使用淘汰工具陷入困境
【发布时间】：2014-04-19 02:00:15
【问题描述】：

我有这个微调器。

设置后没问题，控件显示正确的值，没有错误信息，但是如果我改变它，每次我都会收到这个错误信息：

"TypeError: observable 不是函数"

在这一行：

observable($(element).spinner("value"));

这是我的自定义绑定中的一行，如下所示：

ko.bindingHandlers.spinner = {
  init: function (element, valueAccessor, allBindingsAccessor) {
    //initialize datepicker with some optional options
    var options = allBindingsAccessor().spinnerOptions || {};


    $(element).spinner(options);

    //handle the field changing
    ko.utils.registerEventHandler(element, "spinchange", function () {
        //var observable = valueAccessor();
        var observable = ko.utils.unwrapObservable(valueAccessor());
        observable($(element).spinner("value"));
    });

    //handle disposal (if KO removes by the template binding)
    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
        $(element).spinner("destroy");
    });

  },
  update: function (element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor()),
        current = $(element).spinner("value");

    if (value !== current) {
        $(element).spinner("value", value);
    }
  }
};

如果我将失败的行与被注释掉的行交换：

var observable = valueAccessor();

它工作正常。为什么第一个失败了？

【问题讨论】：

标签： javascript jquery knockout.js spinner

【解决方案1】：

在自定义绑定中，valueAccessor 是一个 function，它返回绑定的值，因此您在绑定的“右侧”拥有什么。

所以在data-bind="spinner: yourValue 的情况下，您将获得yourValue 属性的内容。

如果您的yourValue 是ko.observable，那么在var observable = valueAccessor(); 中，observable 将包含来自yourValue 的实际可观察函数，您现在可以将其设置为任何值：

var observable = valueAccessor();
observable($(element).spinner("value"));

所以在这种情况下这是正确的用法，因为您需要引用和使用您的可观察函数而不是它的值。

但是，如果您使用ko.utils.unwrapObservable(valueAccessor());，那么它会自动解开您的可观察对象，因此您将以一个值而不是函数结束。所以这个调用大致相当于写valueAccessor()();

如果你的视图模型看起来像这样：

vm = {
   yourValue: ko.observable(5);
}

当你写作时：

var observable = ko.utils.unwrapObservable(valueAccessor());
observable($(element).spinner("value"));

observable 将包含值 5 而不是函数，因此您会得到上述异常。

【讨论】：