Come si associa un insieme dinamico di pulsanti jQuery Mobile utilizzando Knockout.js?

Question

Utilizzo jQuery Mobile (jQM) e Knockout.js (ko) per sviluppare un'applicazione. In questa applicazione, ho bisogno di generare un numero variabile di pulsanti che sono definiti da un servizio web in costante aggiornamento.

Quindi, a mio markup, ho:

<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 è un elenco di brevi stringhe restituite dal servizio web. È definito come:

self.buttonLabels = ko.observableArray(); 

Questo tutto funziona correttamente quando i pulsanti non sono "jQM in stile". Tuttavia, quando li stile utilizzando:

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

problemi sorgono durante l'aggiornamento.

Il problema sembra essere che jQM avvolge i pulsanti in un div (con un intervallo di pari livello) per renderli tutti belli e dall'aspetto mobile. Tuttavia, quando il ko applica gli aggiornamenti tramite i binding, rimuove solo i tag, lasciando le cose circostanti, e aggiunge nuovi tag button - che sono poi anche disegnati dalla chiamata trigger di jQM.

Quindi, ho finito con un elenco sempre crescente di pulsanti - solo l'ultimo set è operativo (come i precedenti sono stati eliminati dalla rimozione del loro elemento pulsante, ma tutto lo stile rimane).

sono riuscito a risolvere questo problema, penso, ponendo la seguente chiamata subito dopo la osservabile è aggiornato:

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

Tuttavia, la mia sensazione è che c'è probabilmente un approccio migliore. È lì?

Answer 1

Ho trovato una soluzione.

Se si circondano i pulsanti con un div, sembra funzionare - ad es.

<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> 

Sto indovinando questo è perché il markup aggiunto da jQm rimane "dentro" il markup replicato da ko. Senza il div, jQM racchiude il tag button, che era il figlio immediato del tag che contiene il ko foreach binding.