GooglePolymerのcontentタグをreadyイベント内で解析する方法について
Google Polymer1.0~ でカスタムタグの中に指定したcontentをready内で判定・解析する方法
やりたいこととしては、以下のようなものです。
▼使い手
<custom-contents>
<menues>
<menu>
<menu-title>aaa</menu-title>
<menu-link>http://google.com</menu-link>
</menu>
<menu>
<menu-title>bbb</menu-title>
<menu-link>http://yahoo.co.jp</menu-link>
</menu>
</menues>
</custom-contents>
上記のように、「custom-contents」というカスタムタグの中に、「menues」タグの中に不特定多数の「menu」タグを入れ込み、その中の「menu-title」と「menu-link」が展開され、イメージとしてはこんな風に展開されてほしい。
<a href="http://google.com">aaaa</a><br><a href="http://yahoo.co.jp">bbb</a>
これをPolymerのpropertyではなく、上記のようにinnerHTMLで実現させたいのです。
▼カスタムタグ「custom-content」の中身
<link rel="import" href="bower_components/polymer/polymer.html">
<dom-module id="custom-contents">
<template>
<div>
<span>カスタムコンテンツ</span>
<template items="menues">
<span><a href="{{item.menu-link}}">{{item.menu-title}}</a></span>
</template>
</div>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'custom-contents',
ready: function() {
// この中でcontentに指定された要素を解析したい。
// contentに指定したmenueを配列に格納し、templateでループして展開したい。
}
});
});
</script>
</dom-module>
以上です。上記のことをやりたいのですが、
・readyの中でcontentの取得解析をする方法
or
・他にもっとスマートな方法
等をご存知の方がいらっしゃいましたら、ご教示いただければと存じます。