Question

I’ve got this at the bottom of my post-DOM initialization:

$("button, input:submit, input:button").button();

That works fine for all the buttons on screen, but the buttons that show up later don’t have the theme applied. I’m using the “visible” binding support in knockout.js to show forms according to user interaction on the page. What’s the clean way to apply jqueryUI themes to everything regardless of when it is created?

Answer 1

No, it won’t, because unless you keep reapplying the jquery button code you have there, new buttons won’t be converted.

However, there is a better way to do it with a handler, eg, I use this…

 ko.bindingHandlers.button = {
        init: function (element, valueAccessor, allBindingsAccessor) {
            var options = allBindingsAccessor().buttonOptions || {};
            $(element).button(options);

            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                $(element).button("destroy");
            });

        }
    };

Now you can bind things to be buttons. eg

<button data-bind='button:{}, buttonOptions:{icons: {primary: "ui-icon-pencil"}}'  onclick="">