Useful Select Element

mselect.dart

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


@CustomTag('m-select')
class MSelect extends PolymerElement {
  
  /// value property
  @published Object value = "";
  
  /// 内部のselect elementをget
  SelectElement get _sel => $['select'] as SelectElement;
  
  MSelect.created() : super.created() {
  }
  
  void attached() {
    
    // 自身のOptionを内部のselectにコピーする
    this.children.where( (e)=> e is OptionElement )
    .forEach( (OptionElement opt){
      var o = new OptionElement( data:opt.text, value:opt.value, selected:opt.selected );
      _sel.children.add(o);
    });
    
    // selectにチェンジリスナを張る
    _sel.onChange.listen( (d) {
      value = _sel.value;
      // on-changeイベントとして外部に通知
      fire("change",detail:value);
    });
  }

  /// value property on change
  void valueChanged( Object oldValue, Object newValue ) {
    var _val = newValue.toString();
    try {
      var s = _sel.options.firstWhere( (v) => v.value==_val );
      _sel.selectedIndex = _sel.options.indexOf(s);
    } catch(e) {
      _sel.selectedIndex = -1;
    }
  }
  
}

mselect.html

<meta charset="utf-8">
<link rel="import" href="packages/polymer/polymer.html">

<polymer-element name="m-select" attributes="value">
  <template>
    
  <select id="select">
  </select>
  
  </template>
  <script type="application/dart" src="mselect.dart"></script>
</polymer-element>

sample.html

  <!-- Sample1 -->
  <m-select value="{{hoge}}" on-change="{{changeEvent}}">
    <option value="0">なし</option>
    <option value="5">5秒</option>
    <option value="15">15秒</option>
    <option value="30">30秒</option>
  </m-select>

  <!-- Sample2 : options with repeat-->
  <m-select on-change="{{changeEvent}}" value="{{hoge}}">
    <option template repeat="{{o in options}}" value="{{o['code']}}">{{o['text']}}</option>
  </m-select>