knockout.js - TempusDominus 淘汰赛绑定在初始化后不会触发更新事件
问题描述
我正在尝试将 knockoutjs 与 tempusdominus datetimepicker 一起使用,并且自定义绑定有问题。绑定将在初始化期间工作,但通过 datepicker ui 进行的更改或不导致自定义绑定处理更新事件。请忽略缺少的图标,我认为这不是导致问题的原因。
ko.bindingHandlers.datepicker = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
//initialize datepicker with some optional options
var options = allBindings().datepickerOptions || {
format: 'MM/DD/YYYY HH:mm',
defaultDate: valueAccessor()()
};
$(element).datetimepicker(options);
//when a user changes the date, update the view model
ko.utils.registerEventHandler(element, "change.datetimepicker", function(event) {
var value = valueAccessor();
if (ko.isObservable(value)) {
value(event.date);
}
console.log("change.datetimepicker"); //, event.date.format());
});
},
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var val = ko.utils.unwrapObservable(valueAccessor());
if ($(element).datetimepicker) {
$(element).datetimepicker("date", val);
}
console.log("update called"); //, $(element).datetimepicker("date").format());
}
};
var viewModel = {};
function QuoteViewModel(data) {
var self = this;
self.dt2 = ko.observable(moment());
};
viewModel = new QuoteViewModel();
ko.applyBindings(viewModel);
/*
$("#datetimepicker1").on("change.datetimepicker", function (e) {
console.log("on change", e.date.format());
});
*/
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/d004434a5ff76e7b97c8b07c01f34ca69e635d97/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/d004434a5ff76e7b97c8b07c01f34ca69e635d97/src/js/bootstrap-datetimepicker.js"></script>
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" data-bind="datepicker: dt2" />
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre> SCRIPT
https://jsfiddle.net/mh_surge/7yrze0Lv/6/
如果我取消注释底部添加非 ko 更改事件处理程序的代码,它总是按预期触发。这让我相信 ko.utils.registerEventHandler 可能存在问题,但该函数的源代码似乎很好。
为什么更新和更改事件在初始化期间仅被触发一次,我该如何解决?
解决方案
触发的更改事件不包含event.date
属性。您注释掉 jQuery 版本的原因是它针对不同的元素。
在淘汰赛代码中,您使用的是element
传递给init
and的参数update
。这是指具有datepicker
数据绑定的元素。
在 jQuery 代码中,您的目标$("#datetimepicker1")
是 ,它<div>
具有由插件实现的自定义change
元素。
要解决此问题,您需要:
- 将
datepicker
绑定放在带有 id 的元素上(datetimepicker1
即不在input
元素上) - 使用函数
$(element).on("change.datepicker", ...)
中的语法init
- 添加元素处理回调以清理小部件实例,以防敲除从 DOM 中删除元素
推荐阅读
- angular - 如何运行包含 Angular 的 dockerized protractor 项目?
- python - gRPC Python:使用 TLS 时如何覆盖服务器名称?
- unity3d - unity 和 azure 空间锚点
- usb - USB 控制消息到 libusb-1 中的端点 0x80?
- python - preprocess = pickle.load(example_preprocess) AttributeError: Can't get attribute 'Example_test' on
- java - 如何将 datePicker 信息放入我的 sql 数据库?
- android - Android Google Places Api 评级为空
- javascript - clientX/clientY 和移出范围间歇性工作
- libpcap - Brew install libpcap 不提供二进制文件
- asp.net-core - 负载均衡器是否多次运行 startup.cs?