

# Google Polymer1.0~ でカスタムタグの中に指定したcontentをready内で判定・解析する方法

やりたいこととしては、以下のようなものです。

▼使い手

[code]

    <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>
    
[/code]

上記のように、「custom-
contents」というカスタムタグの中に、「menues」タグの中に不特定多数の「menu」タグを入れ込み、その中の「menu-title」と「menu-
link」が展開され、イメージとしてはこんな風に展開されてほしい。

[code]

    <a href="http://google.com">aaaa</a><br><a href="http://yahoo.co.jp">bbb</a>
    
[/code]

これをPolymerのpropertyではなく、上記のようにinnerHTMLで実現させたいのです。

▼カスタムタグ「custom-content」の中身

[code]

    <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>
    
[/code]

以上です。上記のことをやりたいのですが、

・readyの中でcontentの取得解析をする方法  
or  
・他にもっとスマートな方法

等をご存知の方がいらっしゃいましたら、ご教示いただければと存じます。


CC BY-SA 3.0
2016-05-22T04:58:16.997
25076
2016-06-04T05:06:23.813
2016-06-04T05:03:25.543
3068
15136
question
polymer
GooglePolymerのcontentタグをreadyイベント内で解析する方法について


自己解決いたしました。

▼使う側

[code]

    <body>
        <div class="container">
            <custom-header>
                <menues>
                    <menu title="メニュー1" link="http://google.com/"></menu>
                    <menu title="メニュー2" link="http://yahoo.co.jp"></menu>
                    <drop-menu></drop-menu>
                </menues>
            </custom-header>
            <div style="padding:80px 0 0 0">
                body
            </div>
        </div>
        <custom-footer></custom-footer>
    </body>
    
[/code]

▼Polymer

[code]

    <link rel="import" href="bower_components/polymer/polymer.html">
    <dom-module id="custom-header">
        <template>
            <!-- navbar -->
            <div class="row">
                <nav class="navbar navbar-default navbar-fixed-top">
                    <div class="navbar-header">
                        <a href="" class="navbar-brand">トップ</a>
                    </div>
                    <ul class="nav navbar-nav">
                        <template is="dom-repeat" items="{{menuItems}}">
                            <li>
                                <a href="{{item.link}}">{{item.title}}</a>
                            </li>
                        </template>
                    </ul>
    
                </nav>
            </div>
        </template>
        <style></style>
        <script>
            HTMLImports.whenReady(function() {
                Polymer({
                    is: 'custom-header',
                    ready: function() {
                        this.menuItems = [];
                        var i,
                            j,
                            child,
                            grandchild;
                        // contentの取得 = LocalDOMの子要素
                        var lightChildren = Polymer.dom(this).children;
                        for (i = 0; i < lightChildren.length; i++) {
                            child = lightChildren[i]; // menuesの取得
                            grandchild = Polymer.dom(child).children; // menu配列の取得
                            for (j = 0; j < grandchild.length; j++) {
                                var nodeName = grandchild[j].nodeName;// 要素名の取得
                                console.log(nodeName);
                                if (nodeName === "MENU") {
                                    var menuItemObj = {
                                        title: grandchild[j].getAttribute("title"),
                                        link: grandchild[j].getAttribute("link")
                                    };
                                    this.push("menuItems", menuItemObj); // push(menuItemObj)だとbindingされない
                                }
                            }
                        }
                        console.log(this.menuItems);
                    }
                });
            });
        </script>
    </dom-module>
    
[/code]


CC BY-SA 3.0
2016-05-22T10:52:47.680
25082
2016-06-04T05:06:23.813
2016-06-04T05:06:23.813
3068
15136
25076
answer