2012-09-19 42 views
1

我正在开发一个Ruby和Sinatra项目,并且我正在使用jQuery mobile创建一个移动版本的页面。我在项目中也使用了knockout.js。JQuery手机选择菜单无法正常工作

我有一个正确显示的选择框,但是当我做出选择时,它的文本不会改变,但值会改变。

这里是我的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> 

菜单上有“选择显示”作为标题。当我选择别的东西时,这个不会改变,但值会改变。当我获得所选选项的值时,我可以将其更改。为什么文本不会改变?

+0

这个小提琴是否反映了您的问题? http://jsfiddle.net/aib42/kJJnJ/ – aib

回答

0

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

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

我试过了。仍然不起作用 – jokham

1

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