¿Cómo puedo vincular un conjunto dinámico de botones de jQuery Mobile usando Knockout.js?

Question

Estoy usando jQuery Mobile (jQM) y Knockout.js (ko) para desarrollar una aplicación. En esta aplicación, necesito generar un número variable de botones definidos por un servicio web que se actualiza constantemente.

Por lo tanto, en mi margen de beneficio, que tengo:

<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 es una lista de cadenas cortas devueltos por el servicio web. Se define como:

self.buttonLabels = ko.observableArray(); 

Todo esto funciona bien cuando los botones no tienen "estilo jQM". Sin embargo, cuando los estilo utilizando:

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

surgen problemas durante la actualización.

El problema parece ser que jQM envuelve los botones en un div (con un rango de hermanos) para que todos sean atractivos y móviles. Sin embargo, cuando el ko aplica las actualizaciones a través de los enlaces, solo elimina las etiquetas, deja las cosas que las rodean y agrega nuevas etiquetas de botones, que luego también se diseñan mediante la llamada de activación jQM.

Por lo tanto, termino con una lista cada vez mayor de botones, con solo el último conjunto en funcionamiento (ya que los anteriores son destruidos por la eliminación de su elemento de botón, pero todo el estilo permanece).

He conseguido hacer frente a esto, creo que, mediante la colocación de la siguiente llamada inmediatamente después de que el observables se actualiza:

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

Sin embargo, mi impresión es que es probable que haya un mejor enfoque. ¿Esta ahí?

Answer 1

Encontré una solución.

Si rodeo los botones con un div, parece que funciona, p.

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

supongo esto es debido a que el margen de beneficio añadido por JQM permanece "dentro" del marcado replicado por ko. Sin el div, jQM ajusta la etiqueta de botón, que fue el elemento secundario inmediato de la etiqueta que contiene el enlace de ko foreach.