Polymer1.0 の導入と躓いた箇所まとめ


Productiion Readyって事なので早速 Production 環境に導入してみました。基本は公式サイトに書いてありますが、0.5と1.0系で互換性がない部分や細々とした所で時間がかかってしまったので纏めてみました。
https://www.polymer-project.org/1.0/

# 開発環境

## エディタ

沢山は試してないのですが、[ATOM](https://atom.io/)に[polymer-snippets](https://atom.io/packages/polymer-snippets)と[atom-beautfly](https://atom.io/packages/atom-beautify)を入れた環境がよかったです。

## 環境構築

１からの準備は大変です。[Polymer Starter Kit](https://developers.google.com/web/tools/polymer-starter-kit/)のIntermediateであれば必要なものがほとんど備わっているので使います。ダウンロード後Terminal（Windowsの場合はGit Bash）から

```bash:
unzip polymer-starter-kit-1.0.2.zip
cd polymer-starter-kit-1.0.2
npm install
bower install
gulp serve
```

最後のコマンドを実行するとブラウザが立ち上がるので app/index.html をエディタで開けばすぐに始められます。

編集ファイルのbody部に以下のコードを埋め込んでおくとBrowsersyncが動いてくれて便利です。

```html
<span id="browser-sync-binding"></span>
```

# レイアウト

iron-flex-layoutを使います。CSS3のFlexboxベースのようですが、書き方は少々異なります。
基本的な部分は[ドキュメント](https://elements.polymer-project.org/guides/flex-layout
)を見ればわかりますが、よく使う要素を列挙してみました。

```html:hoge-hoge.html
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">

<dom-module id="hoge-hoge">
  <style>
    .horzontal {
      @apply(--layout-horizontal);
    }
    .vertical {
      @apply(--layout-vertical);
    }

    .flex {
      @apply(--layout-flex);
    }

    .center-center{
      @apply(--layout-horizontal);
      @apply(--layout-center-center);
      height: 100px;
      width: 200px;
    }
    div.bg {
      margin: 10px;
      padding: 10px;
      background-color: silver;
    }
  </style>
  <template>
    <h2>縦並び</h2>
    <div class="horzontal">
      <div class="bg">AAA</div>
      <div class="bg">AAA</div>
    </div>

    <h2>縦並び+間をあける</h2>
    <div class="horzontal">
      <div class="bg">AAA</div>
      <div class="flex"></div>
      <div class="bg">AAA</div>
    </div>


    <h2>横並び</h2>
    <div class="vertical">
      <div class="bg">AAA</div>
      <div class="bg">AAA</div>
    </div>

    <h2>上下中央</h2>
    <div class="center-center bg">上下中央</div>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'hoge-hoge'
  });
</script>
```

実行結果

![03.png](https://qiita-image-store.s3.amazonaws.com/0/8961/d5dd6cd2-d9f2-0377-b263-79656b18c1cb.png)


あとは各々を組み合わせればおおよそのレイアウトは実現可能かと思います。

# データバインディング

## データ内のタグを展開する

基本的にタグはエスケープされます。

```html:hoge-hoge.html
<link rel="import" href="bower_components/polymer/polymer.html">
<dom-module id="hoge-hoge">
  <template>
    <span>{{str}}</span>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'hoge-hoge',
    properties: {
      str: {
        type: String,
        value: 'AAA<br>BBB'
      }
    }
  });
</script>
```

実行結果

![01.png](https://qiita-image-store.s3.amazonaws.com/0/8961/da3e6ad5-020a-2fc4-e2f0-9d62b9ee46d0.png)


タグをエスケープさせないためには inner-h-t-m-l で記述する必要があります。

```html:hoge-hoge.html
    <span inner-h-t-m-l="{{str}}"></span>
````

実行結果

![2.png](https://qiita-image-store.s3.amazonaws.com/0/8961/7e0ce83e-cd9e-b637-aa62-617475729435.png)


## 配列を渡す・受けとる

エレメントに配列を渡す場合はJSONで渡します。

渡す側

```html:index.html
<!doctype html>
<html lang="">

<head>
  <meta charset="utf-8">
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="hoge-hoge.html">
</head>

<body>
  <span id="browser-sync-binding"></span>
  <hoge-hoge arr='{"value":"AAA\u003Cbr\u003EBBB"}'></hoge-hoge>
</body>

</html>
```

受けとる側

```html:hoge-hoge.html
<link rel="import" href="bower_components/polymer/polymer.html">
<dom-module id="hoge-hoge">
  <template>
    <span inner-h-t-m-l="{{arr.value}}"></span>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'hoge-hoge',
    properties: {
      arr: {
        type: Array,
        value: function() {
          return [];
        }
      }
    }
  });
</script>
```

実行結果

![04.png](https://qiita-image-store.s3.amazonaws.com/0/8961/6a7aaa7d-b2c7-2e2b-1b80-b503148a71c6.png)

# テンプレート内での条件分岐

0.5系と1.0系で記述方法が異なるので注意。ググると0.5系と1.0系が混じってるののでちょっとややこしい。

## if

0.5系

```html
    <template if="{{isAdmin}}">
        isAdminがtrue
    </template>
```

1.0系

```html
    <template is="dom-if" if="{{isAdmin}}">
        isAdminがtrue
    </template>
```


## repeat 

データの中身

```js
array='[{"name":"hoge"},{"name":"hoge"}]';
```

1.0系

```html
    <template is="dom-repeat" items="{{array}}" as="data">
         <span>{{data.name}}</span>   
    </template>
```

詳細は公式ドキュメントを。

https://www.polymer-project.org/1.0/docs/devguide/templates.html



思い出したら追記します。

基本的には各エレメント内のdemoにサンプルコードがありますので、そちらを参照することで解決しそうです。