javascript - jQuery Mobile 1.4 未增强使用 knockout.js 添加的内容

Question

我使用 knockout.js“foreach”创建了一个元素列表，并希望将这些元素增强为 jQuery 移动按钮。

  <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>

使用 jQuery Mobile 1.3.2，效果很好。在 1.4 alpha 中，jQuery Mobile 不会对元素做任何事情。

(我知道我问的是没有文档的 alpha 版，但某些功能(例如页面外的面板)即使在这个时间点也使转换非常有吸引力。)

Answer 1

从 jQuery Mobile 1.4 开始，data-role=button 已弃用，并将在 1.5 中删除。它现在被直接向anchor 添加类所取代。主类是 ui-btn，它将一个元素转换为一个按钮。

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