Using Select Element in polymer dart component

Question

Trying to use Select component in custom element as follows. button click works but when an item is selected in the list, the 'selected' and 'value' attribute does not change and list always shows the first element selected. Binding seems to work from dart to html but not from html to dart. Help please!

<html>
  <head>
    <title>index</title>
      <script src="packages/polymer/boot.js"></script>
  </head>

  <body>
     <polymer-element name="my-element" extends="div">    
        <template >
             <button on-click='bclick'>Add new fruit</button>           
             <select  selectedIndex="{{selected}}" value="{{value}}">
                <option template repeat="{{fruit in fruits}}">{{fruit}}</option>
              </select>   

                <div>
                   You selected option {{selected}} with value-from-list
                   {{fruits[selected]}} and value-from-binding {{value}}
                </div>
         </template>

          <script type="application/dart" src="polyselect.dart"></script>
      </polymer-element>     
  <my-element></my-element>
  <script type="application/dart">main() {}</script>
 </body>
</html>

Dart file is as follows:

import 'package:polymer/polymer.dart';
import 'dart:html';

@CustomTag('my-element')
class MyElement extends PolymerElement {

  @observable int selected = 1; // Make sure this is not null.

  // Set it to the default selection index.
  List fruits = toObservable(['apples', 'bananas', 'pears', 'cherry', 'grapes']);

  @observable String value = '';

  void bclick(Event e) {   
   fruits.add("passion fruit");
  }
}

Tusshu Tusshu · Accepted Answer · 2013-08-30T14:13:25

I had to mixin the ObservableMixin class.

class MyElement extends PolymerElement with ObservableMixin

Using Select Element in polymer dart component

1 Answers