我正试图编写一个绑定处理程序,简化select标记与对象的使用。
ko.bindingHandlers.objectSelect = {
init: function(element, valueAccessor, allBindingsAccessor) {
var interceptor = ko.computed({
read: function() {
return valueAccessor()[allBindingsAccessor().optionsValue]();
},
write: function(value) {
valueAccessor()[allBindingsAccessor().optionsValue](value);
}
});
ko.applyBindingsToNode(element, {
value: interceptor
});
}
};
在这把小提琴里http://jsfiddle.net/p8dn2d2n/2/如果运行它,则会选择开始清理,即使使用值AllowUnset也是如此。
如果您对第二个选择进行注释,则一切都如预期。
<select data-bind="
value: current().val.id,
valueAllowUnset: true,
options: options,
optionsValue: 'id',
optionsText: 'name',
optionsCaption: ' '">
</select>
<!-- Problem here -->
<select data-bind="
objectSelect: current().val,
valueAllowUnset: true,
options: options,
optionsValue: 'id',
optionsText: 'name',
optionsCaption: ' '">
</select>
<p><span data-bind="text: current().val.id" /></p>
<div>
<button data-bind="click: click">New</button>
</div>
我怎么了?
看起来这是一个订购问题。value
绑定包含它必须在之后运行的绑定列表,如:after: ['options', 'foreach']
将绑定移动到列表的末尾或(更好)添加此列表可以缓解您的问题。
ko.bindingHandlers.objectSelect = {
after: ['options', 'foreach'],
init: function(element, valueAccessor, allBindingsAccessor) {
var interceptor = ko.computed({
read: function() {
console.log("hi");
return valueAccessor()[allBindingsAccessor().optionsValue]();
},
write: function(value) {
console.log("hi2", value);
valueAccessor()[allBindingsAccessor().optionsValue](value);
}
});
ko.applyBindingsToNode(element, {
value: interceptor
});
}
};
http://jsfiddle.net/rniemeyer/ghpgc72t/