Как привязать динамический набор кнопок jQuery Mobile с помощью Knockout.js?

Я использую jQuery Mobile (jQM )и Knockout.js (ko )для разработки приложения. В этом приложении мне нужно сгенерировать переменное количество кнопок, которые определяются постоянно обновляемым веб-сервисом.

Итак, в моей разметке есть:

<div id="answerPage-buttons" data-bind="foreach: buttonsLabels">
    <button data-role="button" data-inline="true" data-theme="b" data-bind="text: text, click: $root.submitAnswer" />
</div>

buttonLabels — это список коротких строк, возвращаемых веб-службой. Он определяется как :

self.buttonLabels = ko.observableArray();

. Все это прекрасно работает, когда кнопки не в стиле jQM. Однако, когда я стилизую их с помощью :

$("#answerPage-buttons").trigger("create");

, во время обновления возникают проблемы.

Проблема, по-видимому, в том, что jQM заключает кнопки в div (с одноуровневым span ), чтобы сделать их красивыми и мобильными. Однако, когда ko применяет обновления через привязки, он удаляет только теги, оставляя окружающие вещи, и добавляет новые теги кнопок -, которые затем также стилизуются вызовом триггера jQM.

Таким образом, я получаю постоянно -растущий список кнопок -, причем работает только последний набор (, так как предыдущие выпотрошены удалением элемента кнопки, но все стили остаются ).

Мне удалось решить эту проблему, я думаю, разместив следующий вызов сразу после обновления наблюдаемого:

$("#answerPage-buttons div.ui-btn").remove();

Однако я чувствую, что, вероятно, есть лучший подход. Есть?