[英]jQuery Mobile DateBox & Knockout.js
Has anyone successfully used jQuery Mobile DateBox with Knockout.js? 有没有人成功使用过Knockout.js的jQuery Mobile DateBox ?
I'm having trouble getting the binding to work when providing a value to display before selecting a date. 在选择日期之前提供显示值时,我无法使绑定生效。 It remains blank.
它仍然是空白的。 If I use a standard text input, the binding works fine.
如果我使用标准文本输入,绑定工作正常。
<input id="start" type="date" data-bind="value: start" data-role="datebox" data-options='{"mode": "timeflipbox", "useButton": false, "useFocus": true, "dialogForce" : true, "transition" : "slidedown"}'>
//In the view model:
this.start = ko.observable(startTime);
I've tried 我试过了
$('#start').datebox('refresh')
but no luck.... 但没有运气......
I ended up writing a custom binding for knockout which seems to do the trick: 我最终为淘汰赛编写了一个自定义绑定,似乎可以解决这个问题:
ko.bindingHandlers.jqmDateBox = {
update: function (element, valueAccessor, allBindingsAccessor, context) {
setTimeout(function () {
var value = valueAccessor();
var valueUnwrapped = ko.utils.unwrapObservable(value);
$(element).val(valueUnwrapped);
$(element).data('datebox').options.defaultPickerValue = valueUnwrapped;
}, 0);
}
}
Usage: 用法:
<input id="end" name="end" type="date" data-bind="value: end, jqmDateBox: end" data-role="datebox" />
The binding offered by David didn't work for me. 大卫提供的约束对我不起作用。 I'm using the latest unstable version of Datebox.
我正在使用最新的不稳定版Datebox。
I've written this binding, which works for me in calbox mode: 我已经编写了这个绑定,它在calbox模式下适用于我:
ko.bindingHandlers['dateboxvalue'] = {
'init': function(element, valueAccessor, allBindingsAccessor, viewModel) {
ko.utils.registerEventHandler(element, "change", function () {
var value = valueAccessor();
value($(element).datebox('getTheDate'));
});
},
'update': function (element, valueAccessor, allBindingsAccessor, context) {
$(element).datebox();
$(element).datebox('setTheDate', ko.utils.unwrapObservable(valueAccessor()));
$(element).trigger('datebox', {'method':'doset'});
}
};
use like this 像这样用
<label for="mode1">CalBox</label>
<input name="mode1" id="mode1" type="text"
data-role="datebox"
data-options='{"mode":"calbox", "useNewStyle":true}'
data-bind="dateboxvalue: myDate"/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.