0

ko observableArray を使用して jQuery モバイルのリスト ビューを構築しようとしたところ、繰り返し領域内に配置されたフォーム コントローラーの一部がユーザー入力に適切に応答していないことがわかりました。たとえば、次のコード スニペットでは、jqm はフリップ スイッチのリストをレンダリングしますが、フリップしません !!

<ul  data-bind="foreach: [1, 2, 3, 4]" data-role="listview"> 
    <li>
        <select class="flip-a" data-role="slider">
            <option value="on">Yes!!</option>
            <option value="off">No</option>
        </select>        
    </li>
<ul>

コード スニペットを小さく保つために、実際の ko observableArray を単純な配列に置き換えました。コンテナーの少ないバインディングで同じことを試してみたところ、結果は上記の例と同じであることがわかりました。

誰かが私が間違っていることを指摘していただければ幸いです

jsf: http://jsfiddle.net/Chintana/6YRtr/

前もって感謝します

チンタナ

4

2 に答える 2

0

この場合、ノックアウトとjqueryuimobileの間に衝突があるようです。それは物事がどのように作られるかという順序に関係していると思います。つまり、最初にjqueryui mobileがテンプレートを確認してボタンを作成し、次にノックアウトがコードを4回複製します...これによりすべてが少し不足していると思います...これを修正するためのコード例を次に示します。

<ul id="list" data-bind="foreach: [1, 2, 3, 4]" data-role="listview">
    <li>
        <select class="flip-a" data-bind="attr: { 'data-role': 'slider' }" data-role='nojs'>
            <option value="on">Yes!!</option>
            <option value="off">No</option>
        </select>        
    </li>
<ul>

そして、js ...

ko.applyBindings();
$('#list').trigger('create');

この場合、jqueryui mobileの最初のパスはテンプレート（nojsオプション）を無視します。次に、ノックアウトバインディングが発生し、4つのアイテムが作成されます。次に、trigger（'create'）コマンドを呼び出して、リストを強制的に更新します。実際のアイテムはバインドされているため、データロールは「スライダー」になり、正しく変換されます。

ここでフィドル：http：//jsfiddle.net/dWCDw/

于 2013-01-29T00:23:57.323 に答える
0

フリップトグルスイッチのドキュメントを見ると、次のように記載されています。

ラベルのfor属性を入力のIDと一致するように設定して、意味的に関連付けられるようにします。ページレイアウトで不要なラベルをアクセス可能に非表示にすることは可能ですが、セマンティックとアクセシビリティの理由から、ラベルがマークアップに存在する必要があります。

ただし、一意のIDを作成する必要があります...アポストロフィ付きの「for」は意図的に存在することに注意してください。古いIEバージョンで機能します。

<ul data-bind="foreach: [1, 2, 3, 4]" data-role="listview"> 
    <li>
        <label class="ui-hidden-accessible" data-bind="attr: { 'for': 'flip' + $data }"></label>
        <select class="flip-a" data-role="slider" data-bind="attr: { id: 'flip' + $data }">
            <option value="on">Yes!!</option>
            <option value="off">No</option>
        </select>        
    </li>
<ul>
于 2013-01-26T15:11:39.647 に答える