Knockout and jQuery Mobile: Binding select lists

Question

I'm using knockout-2.1.0, jquery.mobile-1.2.0-rc.2 on my project. I've read this link before submitting this post Knockout and jQuery Mobile: Binding data to select lists

My problem is the select list not always display the values. the filling code is correct and it always append the select list,when I inspire the element I found the data, but JQM doesn't display.

I've created bindingHandlers to fire

$(element).selectmenu('refresh', true);

but I found this solution not stable, on my browsers some times work fine and sometimes not. on my IPad2 it didn't work.

this is my code:

ko.bindingHandlers.jqmOptions = {

    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {

        if (typeof ko.bindingHandlers.options.init !== 'undefined')
            ko.bindingHandlers.options.init(element, valueAccessor, allBindingsAccessor, viewModel);

    },
    update: function (element, valueAccessor, allBindingsAccessor, context) {
        if (typeof ko.bindingHandlers.options.update !== 'undefined') {
            ko.bindingHandlers.options.update(element, valueAccessor, allBindingsAccessor, viewModel);
        }
        var instance = $.data(element, 'selectmenu');
        if (instance) {
            $(element).selectmenu('refresh', true);
        } 
    }
};

Is there any stable solution for that issue. Thanks.

I see you've read Knockout and jQuery Mobile: Binding data to select lists, but did you try this solution: stackoverflow.com/a/9374054/932282 ? — mhu

Dave R Dave R · Accepted Answer · 2012-10-16T18:45:15

From the JQueryDocs:

updatelayout

This event is triggered by components within the framework that dynamically show/hide content, and is meant as a generic mechanism to notify other components that they may need to update their size or position. Within the framework, this event is fired on the component element whose content was shown/hidden, and bubbles all the way up to the document element.

$( '#foo' ).hide().trigger( 'updatelayout' );

Knockout and jQuery Mobile: Binding select lists

1 Answers