Question

Knockout正在动态地将选择菜单添加到jQuery Mobile页面。当它出现时它有一些选择菜单样式，即使它尚未初始化为一个。这在初始化时会导致问题，因为它会包含在额外的ui-select中。造成这种情况的原因是什么？如何解决？

这是一个例子。选中“显示选项”以显示选择。然后单击其中一个按钮以查看问题。

Answer 1

看着你的小提琴，选择不是动态的，只有选择中的选项。因此，您可以做的一件事是在标记中将data-role =“none”添加到select中，以便jQM在页面初始化期间不会触摸它。然后，当您致电.selectmenu()时，它会看起来正确。

您的更新 FIDDLE

更新：

使用正确的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");
        }
    });
});

动态jQuery Mobile SelectMenu过早造型

1 个答案: