6

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();

ただし、おそらくもっと良いアプローチがあると思います。ある？

4

1 に答える 1

3

解決策を見つけました。

ボタンをdivで囲むと、うまくいくようです-たとえば

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

これは、jQM によって追加されたマークアップが、ko によって複製されたマークアップの「内部」にとどまっているためだと推測しています。div がない場合、jQM はボタン タグをラップします。これは、ko foreach バインディングを含むタグの直接の子でした​​。

于 2012-05-02T12:20:52.480 に答える