Polymer: Polymer 1.0 select box option not observing

[nathanjohnson320]

Given the following template

      <select id="conditionType" value="{{ conditionType }}" class="browser-default">                                                                                                                       
        <template is="dom-repeat" items="{{conditionTypes}}" as="condition">                                                                                                                                
          <option value="{{condition.id}}">{{condition.conditionType}}</option>                                                                                                                             
        </template>                                                                                                                                                                                         
      </select> 

And this property

      conditionType: {                                                                                                                                                                                      
        type: String,                                                                                                                                                                                       
        value: "",                                                                                                                                                                                          
        observer: 'changeSelected',                                                                                                                                                                         
        notify: true                                                                                                                                                                                        
      }

When I get the result of an iron-ajax call to get the conditionTypes the "changeSelected" function is never being called. Is there any way around this?

[bruunofco]

Hello, to use data bind with native elements you need to attach the event you want to trigger the bind.

Ex: <select value="{{hostValue::change}}">

Code:

<dom-module id="my-generic">
        <template>
            <select value="{{hostValue::change}}">
                   <option value="1">1</option>
                   <option value="2">2</option>
            </select>

        </template>

    </dom-module>

    <script>
        Polymer({
            is: 'my-generic',

            properties: {
                hostValue: {
                    type: String,
                    observer: '_observer'
                }
            },

            _observer: function (v) {
                console.log('alter ' + v);
            }
        });
    </script>

More information:

Polymer Data Bind Native

[nathanjohnson320]

Awesome thanks for the link!