knockout.js TempusDominus Knockout绑定在初始化后不激发更新事件

r8uurelv  于 2022-11-10  发布在  其他
关注(0)|答案(3)|浏览(212)

我正在尝试将knockoutjs与tempusdominus datetimepicker一起使用,但自定义绑定有问题。绑定在初始化时可以工作,但通过datepicker用户界面所做的更改不会导致自定义绑定处理更新事件。请忽略缺少的图标,我认为这不是导致问题的原因。
第一个
https://jsfiddle.net/mh_surge/7yrze0Lv/6/
如果我取消底部添加非ko change事件处理程序的代码的注解,它总是按预期触发。这使我相信ko.utils.registerEventHandler可能有问题,但该函数的源代码似乎没有问题。
为什么更新和更改事件在初始化过程中只被触发一次,我如何修复它?

8fsztsew

8fsztsew1#

触发的change事件不包含event.date属性。您的jQuery版本之所以包含event.date属性,是因为它针对的是不同的元素。
在敲除代码中,您使用的是传递给initupdateelement参数,它引用的是具有datepicker数据绑定的元素。
在jQuery代码中,您的目标是$("#datetimepicker1"),这是一个<div>,它有一个由插件实现的定制change元素。
要解决此问题,您需要:

  • datepicker绑定放在id为datetimepicker1的元素上(即 * 而不是 * 放在input元素上)
  • init函数中使用$(element).on("change.datepicker", ...)语法
  • 添加一个element disposal callback来清理小部件示例,以防knockout从DOM中删除元素
yeotifhr

yeotifhr2#

下面的编辑对我来说既适用于日历弹出窗口,也适用于文本输入的手动编辑。

ko.bindingHandlers.dateTimePicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var options = allBindingsAccessor().dateTimePickerOptions || {};
        var initialValue = ko.utils.unwrapObservable(valueAccessor());
        if (initialValue) {
            options.date = initialValue;
        }
        $(element).datetimepicker(options);

        ko.utils.registerEventHandler(element, "change.datetimepicker", function (event) {
            var value = valueAccessor();
            if (ko.isObservable(value)) {
                value(event.date || event.target.value || null);
            }
        });

        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).datetimepicker("destroy");
        });
    },
    update: function (element, valueAccessor) {
        var val = ko.utils.unwrapObservable(valueAccessor());
        console.log(arguments, val);
        if ($(element).datetimepicker) {
            $(element).datetimepicker("date", val);
        }
    }
};
w8biq8rn

w8biq8rn3#

添加**valueUpdate:'input'**后,我得到了类似的结果,例如

<input type="text" autocomplete="off" data-bind="value:addStart,valueUpdate:'input'" class="form-control datetimepicker-input timepicker" id="addStartTime" data-toggle="datetimepicker" data-target="#addStartTime" />

似乎解决了这个问题。

相关问题