动态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"); 
     } 
    }); 
});