1

私は Ruby と Sinatra のプロジェクトに取り組んでおり、特定のページでは jQuery モバイルを使用してページのモバイル バージョンを作成しています。プロジェクトでもknockout.jsを使用しています。

正しく表示される選択ボックスがありますが、選択を行うと、値が変更されてもテキストは変更されません。

これが私のHAMLコードです:

#subscriptions-content-div{'data-role' => 'content'}
  %ol{'data-role' => 'listview', 'data-inset' => 'true', 'data-bind' => 'foreach: misspelt'}
    %li
      %h3{ 'data-bind' => 'text: show_name'}
      - if shows.empty?
        No Shows in Database
      - else
        %select#show
          %option{'value' => 'no_choice', 'data-placeholder' => 'true'} Select a Show
          - shows.each do |show|
            %option{'value' => show.id}
              = show.name
      %button.btn{ 'data-bind' => 'click: $root.resolveSubscription', 'data-inline' => 'true', 'data-icon' => 'check', 'data-theme' => 'a'}
        Save

これは、ページのソースを表示したときに得られる HTML です。

<div data-role='content' id='subscriptions-content-div'>
      <ol data-bind='foreach: misspelt' data-inset='true' data-role='listview'>

        <li>
          <h3 data-bind='text: show_name'></h3>
          <select id='show'>
            <option data-placeholder='true' value='no_choice'>Select a Show</option>
            <option value='50594de40ea69713630000de'>
              The Night Show
            </option>
            <option value='50594de40ea69713630000df'>
              Another Show
            </option>

            <option value='50594de40ea69713630000e0'>
              Yet Another Show
            </option>
          </select>
          <button class='btn' data-bind='click: $root.resolveSubscription' data-icon='check' data-inline='true' data-theme='a'>
            Save
          </button>
        </li>
      </ol>
    </div>

メニューのタイトルは「Select a Show」です。他のものを選択すると、これは変わりませんが、値が変わります。選択したオプションの値を取得すると、それが変化することがわかります。テキストが変更されないのはなぜですか？

4

2 に答える 2

1

解決策は、KO バインディングが適用されるまで select の初期化を延期することです。ここに見られるように、選択要素に属性を追加し、後でdata-role="none"手動で呼び出しました: http://jsfiddle.net/aib42/xtz5B/$.selectmenu()ko.applyBindings()

于 2012-12-26T11:24:46.627 に答える
0

選択メニューにオプションを動的に追加する場合は、選択メニューを更新すると便利です。

$('#show').selectmenu();
$('#show').selectmenu('refresh');
于 2012-09-19T05:05:16.187 に答える