3

我创建了一个带有 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 版本，但某些功能（例如页面外的面板）即使在此时也使开关非常有吸引力。）

4

2 回答 2

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"
    }]
});

演示

于 2013-12-13T09:10:10.647 回答
0

在调用 applyBindings 之后，您需要在按钮上调用 .refresh 方法。

在你的情况下，像

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

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

于 2013-09-06T20:58:39.507 回答