Databases
StackOverflow2013
Postsdbo
POKnockout and jQuery Mobile: Binding data to select lists
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POKnockout and jQuery Mobile: Binding data to select lists
    text
    copied!<p>I'm using both Knockout (version 2.0) and jQuery Mobile (version 1.0.1) in the same project. The problem is with binding data to select lists. jQuery Mobile presents select lists in a way where the seemingly selected value and the actual list are separate elements. This is fixed by executing</p> <pre><code>$(element).selectmenu('refresh', true); </code></pre> <p>after changing either the list or the selected value. Based on my experience, this is a dangerous situation as developers often forget to refresh select list.</p> <p>To ease this, I wrote my own Knockout binding handler. The values are bound to the select list with following code:</p> <pre><code>&lt;select name="selection" data-bind="jqmOptions: values, optionsValue: 'id', optionsText: 'name', value: selectedValue"&gt; &lt;/select&gt; </code></pre> <p>The implementation of jqmOptions:</p> <pre><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, viewModel) { 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); } } }; </code></pre> <p>This uses the native <code>options</code> binding but in addition to that, it automatically refreshes select lists after changing the list values. There is a problem with this however when I'm changing the selected value. If I first set the list values, my jqmOptions refreshes the select list but at that point, the selected value is not yet set. I end up with a select list, which has all the correct values and internally the right option is selected, but jQuery Mobile still displays the default value as selected.</p> <pre><code>this.values(someArrayOfValues); this.selectedValue(oneOfTheArrayValues); </code></pre> <p>Knockout doesn't allow me to first set the selected value and then setting the list values, because in this case there are no allowed values when I'm setting the selected value. Thus the selected value is always undefined.</p> <p>Is there a way to write a Knockout custom binding which would refresh the select list element in both cases: when changing the list value and when changing the selected value?</p> <p>Currently I solve this situation with following code:</p> <pre><code>this.values(someArrayOfValues); this.selectedValue(oneOfTheArrayValues); this.values(someArrayOfValues); </code></pre> <p>This is not very elegant solution however and I would like to solve it better.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload