我正在使用 Bootstrap 3 Datepicker编辑我的可观察属性之一的日期和时间。当我创建新记录但不编辑已创建的记录时,它工作正常。
我的自定义绑定(bind)如下
ko.bindingHandlers.datetimepicker = {
init: function (element, valueAccessor, allBindings) {
var options = {
format: 'DD/MM/YYYY hh:mm A',
locale: 'en-AU',
sideBySide: true,
defaultDate: ko.unwrap(valueAccessor())
};
ko.utils.extend(options, allBindings.dateTimePickerOptions);
$(element).datetimepicker(options).on("dp.change", function (evntObj) {
var observable = valueAccessor();
if (evntObj.timeStamp !== undefined) {
var picker = $(this).data("DateTimePicker");
var d = picker.date();
if (ko.isObservable(observable)) {
observable(d.format(options.format));
} else {
valueAccessor(d.format(options.format));
console.log("Not observable");
}
console.log(observable, "\n", $(element).val());
}
});
},
update: function (element, valueAccessor) {
var value = ko.unwrap(valueAccessor());
$(element).datetimepicker('date', value || '');
}
};
这是我的 ViewModel 的相关部分
var PicksViewModel = function () {
var self = this;
self.pick = ko.observable();
self.newPick = {
Title: ko.observable(),
Sport: ko.observable(),
MatchTime: ko.observable(),
PublishTime: ko.observable(),
HomeTeam: ko.observable(),
AwayTeam: ko.observable(),
Analysis: ko.observable(),
PickSummary: ko.observable()
};
}
newPick
和 pick
用于 2 个单独的表单。一个用于创建新的,一个用于编辑现有的选择。当我使用日期选择器进行新选择时,它按预期工作并且我没有得到一个控制台日志,显示 Not observable
但是当我编辑现有的选择时,可观察的不会传递给绑定(bind)和因此没有得到更新,我得到了控制台日志。
如何将可观察对象传递给我的自定义绑定(bind)?
我正在使用以下 html 进行绑定(bind)
<form data-bind="with:pick">
<!-- Rest of form omitted -->
<div class="input-group date" id="editMatchTimePicker">
<input type="text" data-bind="datetimepicker:MatchTime">
</div>
</form>
更新
我通过绑定(bind)到一个单独的 observable 并使用计算的 observable 来处理 UTC 和本地时间之间的转换来修复它。
self.editMatchTime = ko.observable();
self.localMatchTime = ko.pureComputed({
read: function () {
self.editMatchTime(self.pick().MatchTime);
var local = moment.utc(self.pick().MatchTime).local().format("YYYY-MM-DD[T]HH:mm:ss");
return local;
},
write: function(value) {
var utcTime = moment(value).utc();
self.editMatchTime(utcTime);
},
owner: self
});
然后我的绑定(bind)更改为
<input type="text" data-bind="datetimepicker:$root.localMatchTime">
最佳答案
您没有将可观察对象绑定(bind)到您的 datetimepicker
,您绑定(bind)的是从可观察对象 MatchTime
转换而来的值。您可以绑定(bind) MatchTime
本身并在处理程序内部进行转换,或者您可以使用 allBindings
参数获取 value
绑定(bind)的可观察对象。如果您绑定(bind) observable 本身,您可以将 value
绑定(bind)功能滚动到您的自定义绑定(bind)处理程序中,这样您只需进行一次绑定(bind)。 (请参阅“简单包装器绑定(bind)”部分 here。)
关于javascript - 如何访问我的自定义绑定(bind)中的可观察对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35762104/