Knockout.jsを使用してダイナミックなjQuery Mobileボタンをバインドするにはどうすればよいですか？

Question

私はjQuery Mobile（jQM）とKnockout.js（ko）を使ってアプリケーションを開発しています。このアプリケーションでは、常に更新されるWebサービスによって定義される可変数のボタンを生成する必要があります。

だから、私のマークアップでは、私が持っている：

<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は、Webサービスから返された短い文字列のリストです。

self.buttonLabels = ko.observableArray(); 

ボタンが「jQMスタイリング」でない場合、これはすべて正常に機能します。しかし、私がそれらを使用してスタイルをとるとき：

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

更新中に問題が発生します。

問題は、jQMがdiv（兄弟スパンを持つ）のボタンをラップして、すばらしくてモバイル性に優れているようです。しかし、koがバインディングを介して更新を適用すると、タグを取り除いて周囲のものを残し、新しいボタンタグを追加するだけで、jQMトリガー呼び出しによってスタイリングされます。

これで、最後のセットだけが操作可能になりました（以前のボタンセットはボタン要素の削除によって犠牲にされましたが、すべてのスタイリングが残ります）。

私はこの問題に対処するために管理してきましたが、私が観察できるが、更新された直後に次の呼び出しを配置することで、考える：

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

はしかし、私の気持ちは、おそらくより良い方法があるということです。ある？

Answer 1

解決策が見つかりました。

divでボタンを囲むと、機能しているようです。 jQMで追加されたマークアップはKOによって複製「内部」マークアップが残っているので、私はこれを推測している

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

です。 divがなければ、jQMはbuttonタグをラップします。これは、foreachバインディングを含むタグの直下の子です。