如何访问自定义绑定中的可观察量
How can I access the observable in my custom binding?
我正在使用 Bootstrap 3 日期选择器来编辑我的可观察量属性之一的日期和时间。当我创建新记录但不编辑已创建的记录时,它工作正常。
我的自定义绑定如下
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 || '');
}
};
这是我的视图模型的相关部分
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
的控制台日志,但是当我编辑现有选取时,可观察量不会传递到绑定,因此不会更新,我得到控制台日志。
如何将可观察量传递给我的自定义绑定?
我正在使用以下 html 进行绑定
<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>
更新
我通过绑定到单独的可观察量并使用计算的可观察量来处理 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
});
然后我的绑定变成了
<input type="text" data-bind="datetimepicker:$root.localMatchTime">
你没有将可观察量绑定到你的datetimepicker
,而是绑定了一个从可观察MatchTime
转换的值。您可以绑定MatchTime
本身并在处理程序内执行转换,也可以使用 allBindings
参数获取value
绑定的可观察量。如果绑定可观察量本身,则可以将value
绑定功能滚动到自定义绑定处理程序中,以便只需进行一次绑定。(请参阅此处的"简单包装器绑定"部分。
这是我
使用的,似乎您缺少此初始化picker.date(value);
ko.bindingHandlers.datetimePicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
var options = {
showTodayButton: true,
format: 'DD/MM/YYYY HH:mm',
sideBySide: true,
locale: 'es'
};
ko.utils.extend(options, allBindingsAccessor().dateTimePickerOptions);
var $el = $(element).datetimepicker(options);
var picker = $el.data("DateTimePicker");
picker.date(value);
$el.on("dp.change", function (ev) {
var observable = valueAccessor();
if ($el.is(':focus')) {
// Don't update while the user is in the field...
// Instead, handle focus loss
$el.one('blur', function (ev) {
var dateVal = picker.date();
observable(dateVal);
});
}
else {
observable(ev.date);
}
});
//handle removing an element from the dom
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
picker.destroy();
});
},
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
$(element).data("DateTimePicker").date(value);
}
};
相关文章:
- 启用具有多个布尔可观察标志的绑定
- 为什么prototypjs观察到回调函数有绑定
- 敲除:可观察数组没有被正确绑定——只有1个结果显示,而api返回6
- KO 绑定复选框:从代码更改“选中”属性,不更改可观察字段
- 动态地向可观察数组中的特定项添加绑定(例如hasfocus)
- 当通过Ajax成功回调更新可观察数组时,启用绑定中断
- knockoutjs上的绑定按键事件,可观察到未填充
- 更改可观察数组会更改自定义绑定处理程序knockoutjs的可见性
- Knockout,无法解析空可观察数组中的绑定错误
- Knockout.js用单个json对象绑定一个可观察对象
- 去掉js可观察数组和复选框,选中绑定失败
- 知道可观察的在根模型中的位置,在 foreach/后代绑定中被淘汰
- 根据某些条件将 JS 绑定到可观察对象内的数组元素
- 自定义绑定到可观察数组,不调用更新函数
- KNOCKOUTJS 将多个输入元素绑定到一个可观察量
- 如果模板内的绑定现在不显示可观察量所包含的值,则挖空
- 如何连接文本绑定中使用的可观察量的值
- Knockout.js - 跨 iframe 可观察绑定
- 如何清除/删除Knockout.js中的可观察绑定
- Knockout可观察绑定仅在第一次ajax调用后更新