3

jQuery mobileでKnockoutJSを使用しようとしていますが、データバインドセットのラジオボタンのスタイルが設定されないという問題が発生しました。

これがフィドルです

私は次のような単純なモデルを持っています：

var vm = {
    options: ["option1","option2","option3"]            
}

$(function() {
    ko.applyBindings(vm);
});

そして、私はそれを次のようにバインドしようとします：

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup" data-bind="foreach: options">
        <input type="radio" name="selectModel" data-bind="attr: { id: $data}, value: $data" />
        <label data-bind="attr: {for: $data}, text: $data"></label>
    </fieldset>
</div>

DOMを調べると、KnockoutJSがコレクションを（大まかに）これに正しく変換したことがわかります（明確にするためにデータバインドを削除します）。

<fieldset data-role="controlgroup">
    <input id="option1" type="radio" name="selectStaticModel" value="option1">
    <label for="option1">option1</label>

    <input id="option2" type="radio" name="selectStaticModel" value="option2">
    <label for="option2">option2</label>

    <input id="option3" type="radio" name="selectStaticModel" value="option3">
    <label for="option3">option3</label>
</fieldset>

HTMLに静的に入力すると、jQueryMobileによって正しくスタイル設定されます。

ここで何が起こっているのか考えてみませんか？同じプロジェクトの他の場所に、リストビューに表示され、スタイルが適切なコレクションがあります。

私はこれまでFFでこれをテストしただけです。

アップデート

これを探してみると、要素に適用して手動でスタイルを設定することを提案する古い情報が見つかりました。.checkboxradio()私はここでそれをしました

$(function() {
    ko.applyBindings(vm);

    $(".boundRadio").checkboxradio();
});

これは一部のユーザーに役立ちますが、静的に定義されたボタンの場合のようにグループ化されていません。最初のアイテムの上部の角と最後のアイテムの下部の角だけを丸めるのではなく、それぞれに個別に丸みを帯びた角があります。

4

1 に答える 1

1

Ok。私はそれを修正したと思います。こちらをご覧ください

バインディングを適用した後にこれを追加しました：

$(function() {
    ko.applyBindings(vm);

    $(".boundRadio").checkboxradio();
    $("#boundFS").controlgroup();
});

boundFS親フィールドセットに割り当てたIDはどこにあり.boundRadio、テンプレートのすべてのラジオボタンに適用されるクラスです。

誰かがこれを処理するためのより良い、よりクリーンな方法を持っていない限り、私はこの質問を閉じます。

于 2012-11-30T17:50:45.880 に答える