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

Answer 2

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

在你的情况下像

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

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

jQuery mobile 1.4没有增强使用knockout.js添加的内容

2 个答案:

HTML

JS