Javascript 敲除自定义绑定处理程序:valueAccessor不是函数
我正在尝试使用为文本输入字段编写的自定义绑定处理程序,该字段上有一个输入掩码。但是,当我尝试使用此功能时,控制台中出现错误:Javascript 敲除自定义绑定处理程序:valueAccessor不是函数,javascript,knockout.js,Javascript,Knockout.js,我正在尝试使用为文本输入字段编写的自定义绑定处理程序,该字段上有一个输入掩码。但是,当我尝试使用此功能时,控制台中出现错误: 未捕获类型错误:valueAccessor(…)不是函数 在HTMLInputElement HTML中呈现的模型json的屏幕截图(其中有一些字段是我从上面的模型代码中剥离出来的): 任何帮助都将不胜感激。据我所知,这些错误通常意味着传递的valueAccessor不是可观察的,但我认为这里的情况并非如此 console.log(valueAccessor)的结果是什么
未捕获类型错误:valueAccessor(…)不是函数
在HTMLInputElement
HTML中呈现的模型json的屏幕截图(其中有一些字段是我从上面的模型代码中剥离出来的):
任何帮助都将不胜感激。据我所知,这些错误通常意味着传递的valueAccessor
不是可观察的,但我认为这里的情况并非如此 console.log(valueAccessor)的结果是什么在init
或update
中的code>?我还想看看ko.toJSON($root)的结果代码>从您的HTML中。这是一种很有前途的调试淘汰视图模型/应用程序的技术。我已经添加了@pimbrouwers的截图。如果你感兴趣,我就想出来了。这里发布的任何代码或绑定处理程序本身都没有问题。在我的包含EventModel
的“根”模型中,我试图像这样将参数传递给EventModel
类的构造函数:this.EventModel=ko.observable(params)
。当我今天回顾代码时,我意识到它实际上并没有用我说的参数实例化EventModel
,而是用这些参数初始化一个可观察的对象。所以startDate
的valueAccessor
没有定义,如果有意义的话。哇!!!!很难找到。很高兴和你一起调试。托特齐恩斯!
import ko from 'knockout';
import $ from 'jquery';
import Inputmask from 'inputmask';
import moment from 'moment';
ko.bindingHandlers.dateInputMask = {
init: function (element, valueAccessor, allBindings) {
$(element).on('focusout change', function () {
console.log(allBindings);
if (element.inputmask.isComplete()) {
let time = moment(element.value, 'DD-MM-YYYY HH:mm');
valueAccessor()(time); //error thrown from this line
} else {
valueAccessor()(null);
}
});
Inputmask('date').mask(element);
},
update: function (element, valueAccessor) {
let value = ko.utils.unwrapObservable(valueAccessor());
let text = moment(value).format('DD-MM-YYYY HH:mm');
element.value = text;
}
}
import ko from 'knockout';
import moment from 'moment';
export class EventModel {
startDate: KnockoutObservable<moment.Moment>;
endDate: KnockoutObservable<moment.Moment>;
constructor(params: any) {
this.startDate = ko.observable<moment.Moment>(moment());
this.endDate = ko.observable<moment.Moment>(params.endDate || moment());
}
}
<div class="form-group row">
<label class="col-lg-3 col-form-label">Startdatum</label>
<div class="col-lg-8">
<input class="form-control date" data-bind="dateInputMask: startDate" />
</div>
</div>