如何使jQuery UI buttonset与knockoutJS一起使用

时间:2015-02-13 19:09:51

标签: javascript jquery jquery-ui knockout.js

我正在使用带有淘汰赛的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/

非常感谢所有提示和建议!

0 个答案:

没有答案