Polymerをやってみた
https://www.polymer-project.org/docs/start/creatingelements.html を見ながらPolymerをやってみた
環境構築
Polymerなパッケージとかいろいろ取ってこないといけないのでbowerを使って行う。bower.jsonを以下の様に定義
{
"name": "my-project",
"version": "0.1",
"dependencies": {
"polymer": "Polymer/Polymer#~0.5.5",
"core-ajax": "Polymer/core-ajax#~0.5.5"
}
}
上記ドキュメント先に書いてるけどcore-ajaxなのを使うには依存性に追加しておかないといけない。でも今回使わないけど一応書いてる
bower update
を実行して必要なパッケージを取ってくる。bower_componentsなディレクトリにそういうライブラリ郡が入ってるはずなので
index.html
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="elements/my-element.html">
</head>
<body>
<my-element message="abc"></my-element>
</body>
</html>
elements/my-elements.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="my-element" attributes="message">
<template>
<div id="el">
<input type="text" value="{{message}}" />
{{len}}
</div><p />
<button on-click="{{stop}}">stop</button>
</template>
<script>
// created -> ready -> domReady
Polymer('my-element', {
/*
publish: {
message: "hoge fuga foobar"
},
*/
// message引数が指定されなかった場合のデフォルト値
message: "hoge fuga foobar",
messageChanged: function() {
console.log(this.message);
this.len = this.message.length;
},
created: function() {
console.log('created');
},
ready: function() {
console.log('ready');
this.len = this.message.length;
},
domReady: function() {
console.log('domReady');
},
// this.removeなどでshadow dom?を持つエレメント等を削除したりするような場合に発生する
detached: function() {
console.log('detached');
},
stop: function() {
this.unbindAll();
//this.$.el.remove();
}
});
</script>
</polymer-element>
デフォルトだと<polymer-element>が持つプロパティに対してChangedな接尾辞が持つイベントがobserveされた結果変更があった場合等においてコールされるような仕組みが存在する模様(https://www.polymer-project.org/docs/polymer/polymer.html#change-watchers)
まぁ非常にざっくりしているけど、Polymerっていうのがどんな感じに動くのかっていうのを見てみたかっただけで使ってみたけど、あくまでデータバインディングとかをスムーズに行う為のものではなくあくまでWeb Componentsに基づいたもの?のような位置に存在するものだと思われる。
でPolymerやってみてる人の意見を調べた所してだとWeb Componentsの根底を習得する必要性があるとのことなのでそっちを色々勉強してからPolymerな勉強は再開するかも