如何使用$ .mobile.linkBindingEnabled = false的jQuery Mobile selectmenu自定义样式？

Question

我们正在使用PhoneGap和Backbone.js开发移动应用程序。为了使Backbone的路由器能够处理主题标签更改，所有教程都会告诉您设置以下属性：

$.mobile.linkBindingEnabled = false;

虽然这对于启用Backbone非常有用，但它现在导致了selectmenu的错误。具体来说，我们想要使用selectmenu弹出窗口的自定义样式（而不是本机），但它不适用于设置为false的选项。

我正在寻找一种手动拦截此事件并显示自定义菜单的方法。我想到的第一件事是手动捕获点击并使用selectmenu的“开放”方法，但这不起作用。

我已经创建了一个jsFiddle（http://jsfiddle.net/tonicboy/zPS5j/）来演示这个问题。首次加载时，您可以单击选择菜单，它将打开自定义样式菜单。如果将linkBindingEnabled切换为false，则它不再有效。

Answer 1

首先，您的示例无法正常工作。我不打算谈论骨干有问题，而是我会尝试向你解释你的例子有什么问题，以及这将如何导致jQuery出现问题。

linkBindingEnabled 是jQuery Mobile初始化设置的一部分，必须在jQuery Mobile之前进行初始化，如下所示：

<script src="jquery.js"></script>
<script>
    $(document).on("mobileinit", function(){
        $.mobile.linkBindingEnabled = false;
    });
</script>
<script src="jquery-mobile.js"></script>

在此处详细了解：Working with jQuery Mobile's Auto-initialization。

如果正确初始化， linkBindingEnabled true 或 false 无关紧要。

这是一个正确的工作示例：http://jsfiddle.net/JJ3Ds/

现在您可以使用此信息来修复项目问题。如果您使用require.js来处理初始化，您可以创建新的js文件，将所有内容放入（使用mobileinit）并在jquery mobile之前初始化它。

Answer 2

好的，我们似乎找到了解决方法。以前，我曾尝试使用selectmenu的open方法，例如：

$("#selectId").selectmenu("open");

但这不起作用，可能是因为它仍然依赖于jQM的点击处理。事实证明，当呈现页面时，jQM为每个选择菜单创建自定义菜单并将它们隐藏在屏幕外，为其提供 #selectId-listbox 形式的ID。您可以使用popup widget以编程方式显示此菜单。

$("#selectId-listbox").popup("open");

不幸的是，由于我们现在必须处理所有点击处理职责，您必须手动捕获用户的选择，更新基础表单元素并关闭菜单。

Answer 3

gabrielschulhof在这里给出了样本：

http://jsbin.com/sacota/4/

另见： https://github.com/jquery/jquery-mobile/issues/7961