投稿

6月, 2015の投稿を表示しています

[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シートで行うようになっているようだ。なるほど。 プロパティにChangeリスナーを張る プロパティ名の後に"Changed"と書いたメソッドを作成すると、そのプロパティが変更された後に呼ばれる! @observable String hoge; void hogeChanged() => print("hoge") ---- <input type="text" value="{{hoge}}"> これでinputの入力文字を変更する度にhogehoge出力されるぞ。 そんな便利なこと許されますかね! idでHtmlElement検索 <div id="hoge"></div> --- var d = $['hoge'] as DivElement; これイケるッス。 でも、途中にtemplateが入ると検索が届かなくなります。要注意! ある条件でElementを隠したい あるElementを表示したりしなかったりすることは<template if="">でも可能ですが、そうじゃない方法もあります。 <div hidden?=&qu