Polymer 1.0をさわってみて

html

このタスクの中で使われてる`gulp-useref`ってやつ、最初にこれを見つけたとき衝撃でした。

`app/index.html`の中身をなめて、

 <!-- build:js scripts/main.min.js -->
 <script src="scripts/lib/jquery.js"></script>
 <script src="scripts/main.js"></script>
 <!-- endbuild -->

的なコメントブロックを見つけると、そこの指定通りにビルドしてくれるってやつです。

つまり、必要なものです！
なんだこの無駄に丁寧なコメント・・って思って無意識に消さないように注意です！！

ビルドのときに一緒にまとめてくれるので、自分で書いたコードを追加するならココに足すとよかです。

vulcanize

vulcanizeはPolymerやるなら避けて通れない概念です。

コンポーネントに分けまくって開発したり、外部のコンポーネントをインポートしたりすると、あちこちのファイルが細かくリクエストを飛ばしまくる地獄絵図が容易に想像できますよね。
それをまとめることでリクエスト減らそうっていうタスクです。

ヴァルカナイズとは、〈ゴムを〉硬化[加硫，硫化]するって意味らしいですよ。

さて、いよいよ踏み込みます。

id="hoge" -> `this.$.hoge`

お察しの通り、idを振っておくと参照する時に楽です。
Vue.jsとかReactにもこういうのあったやんね。

外から渡す

SassのMixinのアレみたい。

<dom-module id="my-elm">
  <template>
  <ul>
    <li>??</li>
    <content></content>
  </ul>
  </template>
  <script>
    Polymer({is: 'my-elm'});
  </script>
</dom-module>

からの

<my-elm>
  <li>!!</li>
</my-elm>

ってすると

<my-elm>
  <ul>
    <li>??</li>
    <li>!!</li>
  </ul>
</my-elm>

ってできる。

外から渡す 2

<my-elm word="hello"></my-elm>
<my-elm word="goodbye"></my-elm>

ってのは、

<dom-module id="my-elm">
  <template>
    <p>Say <span>{{word}}</span></p>
  </template>
  <script>
    Polymer({
      is: 'my-elm',
      properties: {
        word: { type: String }
        // OR word: String
      },
      ready: function() { console.log(this.word); }
    });
  </script>
</dom-module>

React.propTypesみたいやね。

dom-repeat

配列まわしたいとき。

<template is="dom-repeat" items="{{users}}" as="user">
  <span>{{index}}</span>. <span>{{user.name}}</span>
</template>

template万能すぎぃ。

• `as`で指定しなかったら`item.**`でアクセス。
• `index`はいわゆるインデックス。

dom-if

条件分岐したいとき。

<template is="dom-if" if="{{cond}}">
  if
</template>
<template is="dom-if" if="{{!cond}}">
  else
</template>

ちなみに、template要素はトップレベルに一つだけしか置いちゃダメです。
なので、

<template>
  <template is="dom-if" if="{{cond}}">
    if
  </template>
  <template is="dom-if" if="{{!cond}}">
    else
  </template>
</template>

ってな具合にせないかんです。

{{hoge}} vs \[\[hoge\]\]

<span>{{hoge}}</span> vs <span>[[hoge]]</span>

この違いは、データのバインディングが双方向か、一方向かの違い。

必ず要素で囲う

<!-- ok -->
<div>{{hoge}}</div>

<!-- ng -->
<div>
  {{hoge}}
</div>

<!-- ng -->
{{hoge}}

そして

<!-- ok -->
<div>
  HOGE: <span>{{hoge}}</span>
</div>

<!-- ng -->
<div>HOGE: {{hoge}}</div>

Polymerまじ・・・。

属性にも変数を

<!-- href -->
<a href$="{{url}}">

<!-- dataset -->
<div data-bar$="{{baz}}"></div>

こういう書き方で書くと、内部的に`setAttribute`してくれるからこっちのが良いらしいですよ。

文字列連結

コレを見て察してください。

<dom-module id="my-tw">
  <template>
    <a href$="{{_tw(id)}}" title$="{{id}}">@<span>{{id}}</span></a>
  </template>
  <script>
    Polymer({
      is: 'my-tw',
      _tw: function(id) { return 'https://twitter.com/' + id; }
    });
  </script>
</dom-module>

Polymerほんとまじ・・・。

inner-h-t-m-l

外部からHTMLをいれこみたいとかありますよね？？？？？？

Polymerでは基本的に全部エスケープされちゃうので、どうしようもないです！
お手上げです！ってなってたんですけど・・・。

<dom-module id="my-html">
  <template>
    <div inner-h-t-m-l="{{htmlStr}}"></div>
  </template>
  <script>
    Polymer({
      is: 'my-html',
      ready: function() { this.htmlStr = '<p>HTML!</p>'; }
    });
  </script>
</dom-module>

なんだこれ。
ドキュメント検索しても出てこないしドコ情報やねんって感じですけど、動きます。

ちなみに、

• o: inner-h-t-m-l=""
• o: inner-H-T-M-L=""
• o: inner-h-T-m-l=""
• o: inner-h-t-M-l=""
• o: inner-h-t-m-L=""
• x: innerHTML=""
• x: innerHtml=""
• x: inner-HTML=""
• x: inner-Html=""
• x: inner-html=""

ハイフンが重要です。
Polymer・・・ほんとまじ・・・。