[Polymer+Dart] 逆引きPolymer

Polymer 1.0なんてニュースもありますね。
Dart + Polymerも、ようやく実用レベルに達したような気もしてきたこの頃。

というわけで豆知識。

Polymerのレイアウト支援機能

horizontalとかflexとかのキーワードを属性に書くだけでレイアウトしてくれちゃうぞ。

<div horizontal layout>
<div>hoge</div>
<div flex>fuga</div>
</div>

これで横に並べてくれちゃう。"hoge"はサイズ固定。
https://www.polymer-project.org/0.5/docs/polymer/layout-attrs.html
でも、Polymer1.0にこの機能ないんだね…。Styleシートで行うようになっているようだ。なるほど。

プロパティ名の後に"Changed"と書いたメソッドを作成すると、そのプロパティが変更された後に呼ばれる！

@observable String hoge;
void hogeChanged() => print("hoge")
----
<input type="text" value="{{hoge}}">

これでinputの入力文字を変更する度にhogehoge出力されるぞ。
そんな便利なこと許されますかね！

<div id="hoge"></div>
---
var d = $['hoge'] as DivElement;

これイケるッス。
でも、途中にtemplateが入ると検索が届かなくなります。要注意！

あるElementを表示したりしなかったりすることは<template if="">でも可能ですが、そうじゃない方法もあります。

<div hidden?="{{flag}}"></div>
<button on-click="{{hoge}}">出てこい</button>
---
@observable flag = true;
void hoge() {
flag = false;
}

templateを使わないので、$[]検索も届きます。
っていうか?=って何ヨ？
Polymer1.0では、$=になっているようだ。

fire('hoge', detail: {'message': "hogehoge"});

ってやると、

<div on-hoge="{{fuga}}"></div>

ってキャッチできるそうですよ。

<div on-change="{{hoge}}">
<input type="radio" name="h" value="A">
<input type="radio" name="h" value="B">
</div>

radioボタンのon-changeがdivでキャッチ出来るんだと。