jQuery mobile 1.4 не улучшает контент, добавленный с помощью Knockout.js

Я создаю список элементов с помощью 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 jQuery mobile ничего не делает с элементами.

(Я знаю, что спрашиваю об альфе без документации, но некоторые функции, такие как панели за пределами страниц, делают переход очень привлекательным даже на данный момент.)


javascript jquery-mobile knockout.js progressive-enhancement
person gzost    schedule 28.08.2013    source источник
comment
data-role=buttonустарел с 1.4 и будет удален в 1.5, замените его на class="ui-btn" это способ создания кнопок в 1.4   -  person Omar    schedule 13.12.2013

Ответы (2)


arrow_upward
1
arrow_downward

Начиная с 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"
    }]
});

Демо

person Omar    schedule 13.12.2013

arrow_upward
0
arrow_downward

Вам нужно вызвать метод .refresh на ваших кнопках после вызова applyBindings.

В вашем случае что-то вроде

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

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

person Mahesh    schedule 06.09.2013
comment
Проблема заключается не в повторном применении стиля, а в том, что элементы не устанавливаются как кнопки мобильным jQuery в первую очередь. Только что попробовал еще раз, и он отлично работает с jQuery mobile 1.3.2. - person gzost; 08.09.2013