1

我正在开发一个 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>

菜单以“选择节目”为标题。当我选择其他东西时，这不会改变，但值会改变。当我获得所选选项的值时，我可以告诉它发生了变化。为什么文本不会改变？

4

2 回答 2

1

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

于 2012-12-26T11:24:46.627 回答
0

如果您正在向选择菜单动态添加选项，那么刷新选择菜单可能会有所帮助。

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