JeffGillin JeffGillin - 3 months ago 19
Javascript Question

polymer select values not set

I've setup a JSbin to show an issue I'm having with a polymer select box not reflecting the model (initially), however, the model does get updated after selecting an option. Note that in my example, I'm ensuring the model is loaded after the select options are populated, however, I guess the tricky thing here is that the select box population is a nested dom-repeat (thus when module is populated, the nested dom-repeat for the 'select' must be re-populated - I'm guessing).

Here's the bin and how to test it to show the dilemma.

http://jsbin.com/xucavi/edit?html,console,output

After page loads, note there are no selections made in the 2 select boxes. Click the 'Display Values from Model' button. Note that the values show the model has values. Select 'Digital' for each of the 2 select boxes. Now click the 'Display Values from Model' button again - and note that model has been updated.

Any thoughts on how to work around this? Thanks

Answer

You need to compute the value for the selected attribute of the option elements.

Modify the outer dom-repeat to bind the actual books to the property book instead of item. Now, binding the selected attribute to a _computeSelected(item, book) function makes it possible to dynamically calculate the selected book type:

<option value='{{item.id}}' selected$='[[_computeSelected(item, book)]]'>{{item.type}}</option>

The implementation of the function itself is quite simple:

_computeSelected: function(item, book) {
    return item.id === book.typeId;
}

Working example of your JS Bin: http://jsbin.com/sodugigubo/edit?html,console,output

For a more in depth explanation, read about computed binding and attribute binding.

Warning: Be aware that Polymer dom repeat is not working for Select Option in IE.