Knockout and jQuery Mobile: binding pick lists

Question

I am using knockout-2.1.0, jquery.mobile-1.2.0-rc.2 in my project. I read this link before sending this post to Knockout and jQuery Mobile: data binding to select lists

My problem in the select list does not always display values. The fill code is correct, and it always adds a selection list when I inspire the item that I found the data, but JQM is not displayed.

I created bindHandlers to run

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

but I found that this solution is not stable, they work fine several times in my browsers, and sometimes not. on my iPad2 this did not 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 a sustainable solution to this problem. Thanks.

Answer 1

From jQueryDocs:

Updatelayout

This event is triggered by components within a framework that dynamically show / hide content and are understood as a common mechanism for notifying other components that may be required to update their size or position. As part of this event, this event is fired on the component of the component whose contents were shown / hidden, and bubbles up to the document element.

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