javascript - 绑定(bind)处理程序 'value is not a function' knockoutJS

Question

我很困惑是什么导致了这里的问题，因为这个绑定(bind)处理程序通常工作正常(如下)

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')); 说 value 不是函数？

这些选项在我的 View 模型中定义如下:-

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

对应的HTML和绑定(bind)是:-

<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)，但是当我尝试更改它时，它会抛出错误。

Answer 1

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

就目前情况而言，您在一个函数的本地作用域中定义value，然后尝试稍后在另一函数的本地作用域中访问它。

我建议直接在每个 div 上使用 click 绑定(bind)。 Knockout 会自动向您传递被单击的 ViewModel 实例，因此您可以在 $root View 模型上的单击处理程序内部使用该实例来确定单击了哪个按钮以使其处于事件状态。