Here's what I want to do:
▼Users
<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>
As mentioned above, I would like you to put many and unspecified "menu" tags in the "menu" tag in the "custom-content" tag, and the "menu-title" and "menu-link" in the custom tag "custom-content" are developed like this.
<a href="http://google.com">aaaaa</a>br><a href="http://yahoo.co.jp">bbb</a>
I would like to do this with innerHTML, not Polymer's property.
▼ Contents of custom tag custom-content
<link rel="import" href="bower_components/polymer/polymer.html">
<dom-module id="custom-contents">
<template>
<div>
<span>Custom Content</span>
<template items="menues">
<span><a href="{{item.menu-link}}">{item.menu-title}}</a>/span>
</template>
</div>
</template>
<script>
HTMLImports.whenReady(function(){
US>Polymer({
is: 'custom-contents',
ready: function() {
// I would like to analyze the elements specified in the content.
// I would like to store the menu specified in the content in an array and loop it in template to deploy it.
}
});
});
</script>
</dom-module>
That's all.I'd like to do the above.
·How to analyze content acquisition in ready
or
·Another smarter way
Please let me know if anyone knows anything like this.
polymer
Self-resolved.
▼Users
<body>
<div class="container">
<custom-header>
<menues>
<menu="Menu 1" link="http://google.com/"></menu>
<menu="Menu 2" link="http://yahoo.co.jp">/menu>
<drop-menu></drop-menu>
</menues>
</custom-header>
<div style="padding:80px0000">
body
</div>
</div>
<custom-footer>/custom-footer>
</body>
▼ Polymer
<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">top</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(){
US>Polymer({
is: 'custom-header',
ready: function() {
This.menuItems=[];
vari,
j,
child,
grandchild;
// Get content = LocalDOM child element
varlightChildren=Polymer.dom(this).children;
for(i=0;i<lightChildren.length;i++){
Get child=lightChildren[i]; // menus
grandchild=Polymer.dom(child).children; // Get menu array
for(j=0;j<grandchild.length;j++){
var nodeName=grandchild[j].nodeName;// Get element name
console.log(nodeName);
if(nodeName==="MENU"){
varmenuItemObj={
title: grandchild[j].getAttribute("title"),
link: grandchild [j].getAttribute("link")
};
This.push("menuItems", menuItemObj);//push(menuItemObj) does not bind
}
}
}
console.log (this.menuItems);
}
});
});
</script>
</dom-module>
© 2024 OneMinuteCode. All rights reserved.