绑定处理程序'值不是函数'敲除JS答案

【问题标题】：Binding handler 'value is not a function' knockoutJS绑定处理程序'值不是函数'敲除JS
【发布时间】：2015-12-08 10:22:15
【问题描述】：

我不知道是什么导致了这里的问题，因为这个绑定处理程序通常可以正常工作（如下）

ko.bindingHandlers.buttonGroupChecked = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    var value = valueAccessor();
    var newValueAccessor = function() {
        return {
            click: function() {
                value(allBindingsAccessor.get('val'));
            }
        };
    };
    ko.bindingHandlers.event.init(element, newValueAccessor,
            allBindingsAccessor, viewModel, bindingContext);
},
update: function(element, valueAccessor, allBindingsAccessor,
        viewModel, bindingContext) {
    if (allBindingsAccessor.get("val") === ko.unwrap(valueAccessor())) {
        helpers.activeClassSingle(element, "btn-info", "btn-success");
    }


}
};

我在第 7 行 value(allBindingsAccessor.get('val')); 不断收到错误，说值不是函数？

选项在我的视图模型中定义如下：-

self.yesNoOptions = [
    {val: 1, text: "Yes"},
    {val: 0, text: "No"}
];

而对应的HTML和绑定是：-

<div class="btn-group btn-group-justified" data-bind="foreach: $root.yesNoOptions">
               <div class="btn btn-lg btn-info" data-bind="buttonGroupChecked: $root.currentVariation().variationAgreed, val: val, text: text"></div>
            </div>

其中$root.currentVariation().variationAgreed 是当前选中的项目，并且是作为以下对象一部分的可观察对象。

var observableWorkItemVariation = function(data){
var self = this;
data = data || {};
self.id = ko.observable(data.id || "");
self.orderWorkItemID = ko.observable(data.orderWorkItemID || "");
self.variationAgreed = ko.observable(data.variationAgreed || 0);
self.changeWorkBillable = ko.observable(data.changeWorkBillable || 1);
self.declareBillable = ko.observable(data.declareBillable || 0);

self.changeWorkBillable.subscribe(function(val){
   if(self.changeWorkBillable() == 0){
       self.declareBillable(0);
   } 
});

self.changeWorkPayable = ko.observable(data.changeWorkPayable || 1);
self.variationCode = ko.observable(data.variationCode || "");
}

它正确地突出显示所选项目（否，因为它默认为 0）但是当我尝试更改它时会引发错误。

【问题讨论】：

你能给我们一个示例代码吗？
赋值后看看是什么：console.debug("Value:", value);是函数吗？

标签： javascript knockout.js data-binding bindinghandlers

【解决方案1】：

当click 被触发时，value 似乎超出了范围。

就目前而言，您在一个函数的本地范围内定义 value，然后您稍后尝试在另一个函数的本地范围内访问它。

我建议直接在每个 div 上使用click 绑定。 Knockout 会自动向您传递一个被点击的 ViewModel 实例，因此您可以在 $root 视图模型上的点击处理程序中使用该实例来确定点击了哪个按钮以使其处于活动状态。

【讨论】：

【解决方案2】：

感谢您的建议，roy 给出了有用的意见。

问题是我正在从另一个对象创建一个对象，并且我将变量作为 varName 而不是 varName() 传递来获取值（或 ko.toJS(object)），因此它将 observable 作为传递observable 的值。

我很难发现这一点，就像您在 <pre> 标签中的 viewModel 上执行 ko.toJS() 一样，它会解开它并显示正确的值。

希望任何遇到此问题的人都清楚这一点。

【讨论】：