Question

我正在开发一个Ruby和Sinatra项目，对于一个特定的页面，我正在使用jQuery mobile来创建页面的移动版本。我也在项目中使用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>

菜单中有“选择一个节目”作为标题。当我选择其他东西时，这不会改变，但值会改变。当我得到所选选项的值时，我可以告诉它更改。为什么文本不会改变？

Answer 1

解决方案是推迟选择＆＃39;初始化直到应用KO绑定之后。我将data-role="none"属性添加到了选择元素，并在$.selectmenu()后手动调用ko.applyBindings() - 如下所示：http://jsfiddle.net/aib42/xtz5B/

Answer 2

如果您在选择菜单中动态添加选项，则刷新选择菜单会很有帮助。

$('#show').selectmenu();
$('#show').selectmenu('refresh');

JQuery移动选择菜单无法正常工作

2 个答案: