How to use the custom jQuery Mobile selection style with $ .mobile.linkBindingEnabled = false?

advertisements

We are developing a mobile app using PhoneGap and Backbone.js. In order to enable Backbone's router to handle hashtag changes, all tutorials tell you to set the following property:

$.mobile.linkBindingEnabled = false;

While this works great to enable Backbone, it is now causing a bug with the selectmenu. Specifically, we want to use the custom style of selectmenu popup (as opposed to native), but it doesn't work with that option set to false.

I'm looking for a way to manually intercept this event and show the custom menu. The first thing I thought of is to manually capture the click and use the selectmenu's "open" method, but this doesn't work.

I've created a jsFiddle (http://jsfiddle.net/tonicboy/zPS5j/) to demonstrate the problem. When you first load it up, you can click on the selectmenu and it will open the custom-style menu. If you toggle the linkBindingEnabled to false, it no longer works.


First, your example is not working correctly. I am not going to talk about backbone problematic, instead I will try to explain to you what is wrong with your example and how is that going to cause problems with jQuery.

linkBindingEnabled is a part of jQuery Mobile initialization setting and it must be initialized before jQuery Mobile, something like this:

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

Read more about it here: Working with jQuery Mobile's Auto-initialization.

When properly initialized it doesnt matter if linkBindingEnabled is true or false.

Here's a correct working example: http://jsfiddle.net/JJ3Ds/

Now you can use this information to fix your project problem. If you are using require.js to handle initializations you can create new js file, put everything inside (with mobileinit) and initialize it before jquery mobile.