動態jQuery Mobile SelectMenu過早造型

Question

Knockout動態地將選擇菜單添加到jQuery Mobile頁面。當它出現時，它有一些選擇菜單樣式，即使它沒有被初始化爲一個樣式。這會導致一個問題，當我初始化它，因爲它然後被包裹在一個額外的ui-select。是什麼導致了這個問題，我該如何解決這個問題？

這裏是一個例子。選中「顯示選項」以顯示選擇。然後點擊其中一個按鈕來查看問題。

http://jsfiddle.net/5udqV/1/

Answer 1

看你的小提琴，選擇不是動態的，僅在選擇的選項。因此，您可以做的一件事是在標記中添加data-role =「none」，以便在頁面初始化期間jQM不會觸摸它。然後當你撥打.selectmenu()時，它會看起來很正確。

你更新FIDDLE

UPDATE：

使用適當的JQM結構和事件：

DEMO

<div data-role="page" id="page1"> 
    <div data-role="header"> 
     <h1>My page</h1> 
    </div> 
    <div role="main" class="ui-content">show options 
     <input type="checkbox" data-bind="checked: showOptions" /> 
     <br /> 
     <div data-bind="if: showOptions"> 
      <select data-bind="options: options, value: selectedOption"></select> 
     </div> 
     <button id="a">create select</button> 
     <button id="b">refresh select</button> 
     <button id="c">create page</button> 
     <div data-bind="text: ko.toJSON($root)"></div> 
    </div> 
</div> 

var vm = { 
    options: ["A", "B", "C"], 
    showOptions: ko.observable(), 
    selectedOption: ko.observable("B") 
}; 
ko.applyBindings(vm); 

$(document).on("pagecreate", "#page1", function() { 
    $('button').on("click", function() { 
     var id = $(this).prop("id"); 
     if (id == "a") { 
      $("select").selectmenu(); 
     } else if (id == "b") { 
      $("select").selectmenu("referesh"); 
     } else if (id == "c") { 
      $(".ui-page").trigger("create"); 
     } 
    }); 
});