我正在使用带有淘汰赛的jQuery UI按钮组。 不知何故,它适用于单个“图层”(或范围),但当我对数组应用选择时,UI格式消失。
我想这与ID有关,但无法完全弄明白。
我的视图模型包含两个项目:
self.items = ko.observableArray([
new Title( {ID: 1, name: 'The first one', isBold: true, isItalic: false }),
new Title( {ID: 2, name: 'The second one', isBold: false, isItalic: true, isUnderlined: true })
]);
self.selected = ko.observable();
HTML:
<select data-bind="options:items, optionsCaption: 'Choose item...', optionsText: 'name', value: selected"></select>
<div id="format" data-bind="with: selected(), jqButtonset: {}">
<input type="checkbox" id="myBold" data-bind="checked: isBold" ><label for="myBold">B</label>
<input type="checkbox" id="myItalic" data-bind="checked: isItalic"><label for="myItalic">I</label>
<input type="checkbox" id="myUnderlined" data-bind="checked: isUnderlined"><label for="myUnderlined">U</label>
</div>
绑定是这样的:
ko.bindingHandlers.jqButtonset = {
init: function (element) {
$(element).buttonset(); // Turns the element into a jQuery UI button
},
update: function (element, valueAccessor) {
var currentValue = valueAccessor();
$(element).buttonset("option", "disabled", currentValue.enable === false);
}
};
小提琴:http://jsfiddle.net/AsleG/cq0fvpe2/
非常感谢所有提示和建议!