jQuery mobile 1.4 not enhancing content added with knockout.js

Question

I create a list of elements with a knockout.js 'foreach', and want these to be enhanced to jQuery mobile buttons.

  <div data-role="content" class="content">
     <div id="buttonContainer" data-bind="foreach: buttons">
        <div class="controllerButton" data-role="button">              
              <span class="buttonText" data-bind="text: label"></span>
        </div>
     </div>         
  </div>

Using jQuery mobile 1.3.2, this works fine. With the 1.4 alpha, jQuery mobile doesn't do anything to the elements.

(I'm aware I'm asking about an alpha without documentation, but certain features like panels outside of pages make the switch very attractive even at this point in time.)

Answer 1

As of jQuery Mobile 1.4 data-role=button is deprecated and will be removed on 1.5. It is now replaced by adding classes directly to anchor. The main class is ui-btn which will convert an element into a button.

HTML

<div data-role="content" class="content">
  <div id="buttonContainer" data-bind="foreach: buttons">
    <!-- adds button and icon classes -->
    <a class="controllerButton" data-bind="text: label, css: icon">
    </a>
  </div>
</div>

JS

ko.applyBindings({
    buttons: [{
        "label": "One",
            "icon": "ui-btn ui-icon-home ui-btn-icon-top"
    }, {
        "label": "Two",
            "icon": "ui-btn ui-icon-arrow-r ui-btn-icon-right"
    }, {
        "label": "Three",
            "icon": "ui-btn ui-icon-edit ui-btn-icon-bottom"
    }, {
        "label": "Four",
            "icon": "ui-btn ui-icon-info ui-btn-icon-left"
    }, {
        "label": "Five",
            "icon": "ui-btn ui-icon-delete ui-btn-icon-notext"
    }]
});

Demo

Answer 2

You need to call the .refresh method on your buttons, after calling applyBindings.

In your case something like

...
ko.applyBindings()
$('.controllerButton').button('refresh');

http://api.jquerymobile.com/button/#method-refresh