[Dart] Polymer : 独自selectを作ってみた

HTMLのselectって基本的にワナが多いよね。

Polymerでのselectも正直言って不便。

valueでは初期値が渡せないのでselectedIndexでやるしかないのだが、indexって扱いづらい。
<select value="{{src}}">

というわけで、いい加減イヤになって、独自のカスタムselectを作ってみた。
（Paper Elementsを使うとちゃんとしているのかなー？）


こんな感じ。

	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;
	}
	}
	}

view raw mselect.dart hosted with ❤ by GitHub

	<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>

view raw mselect.html hosted with ❤ by GitHub

	<!-- 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>

view raw sample.html hosted with ❤ by GitHub

でも、IEとFirefoxでは動かないんだよね！ $['select']が正しく効かないのよ。 Polymerって一体いつ使い物になるのか？って感じだよね…。 Angularにするかな…。