Oh, my apologies Aleem! I thought you were pulling some arbitrary set of
links from a datastore or something. Sorry that I misread your intent.
You can still use the Polymer's template data binding in this case, it
cleans up the javascript and makes the custom element more readable (IMHO),
here's the code snippet to show what I mean:
<link rel="import" href="/assets/bower_components/polymer/polymer.html">
<link rel="import"
href="/assets/bower_components/core-pages/core-pages.html">
<link rel="import"
href="/assets/bower_components/paper-tabs/paper-tabs.html">
<polymer-element name="code-file-set">
<template>
<paper-tabs style="max-width:{{tabBarWidth}}px" id="tabs"
selected={{selected}}>
<template repeat="{{ tab in tabNames }}">
<paper-tab>{{tab}}</paper-tab>
</template>
</paper-tabs>
<core-pages selected="{{selected}}">
<content id="codecontent" select="a"></content>
</core-pages>
</template>
<script>
Polymer('code-file-set', {
domReady: function() {
var codeNodes = this.$.codecontent.getDistributedNodes();
this.tabNames = [];
for (var i = 0; i < codeNodes.length; i++) {
this.tabNames.push(codeNodes[i].getAttribute('tabTitle'));
}
this.selected = 0;
this.tabBarWidth = codeNodes.length * 250;
},
});
</script>
</polymer-element>
You can see that I've replaced your javascript createElement and appendChild
lines
with a simple push to an array which can be used by Polymer's template
binding. Does that make sense? I like this approach because I can see
exactly what's being created just by looking at the shadow dom.
A slight follow-up question for you though...why are you creating a custom
element at all? Are you trying to hide Polymer implementation details? It's
very common/straightforward to use the paper-tabs/core-pages combo directly
(in fact it is a direct example on the Polymer
docs:
https://www.polymer-project.org/docs/elements/paper-elements.html#paper-tabs).
I'm not sure that I see what you buy by wrapping this into a custom
element. Why reinvent the wheel?
Anyway, hope that is helpful. Sorry for the long delay in response. I only
get time to check out the polymer list after the work day is finished :)
--Dennis
On Tuesday, January 6, 2015 8:25:05 PM UTC-8, [email protected] wrote:
>
> Hi all,
>
> Sorry for the newbie question but I'm creating my first element. I'm
> trying to create an element which has a dynamic number of tabs depending on
> what content is given to the element. The only way I've figured out how to
> do this is in JS but I have a feeling this isn't the Polymer way, what am I
> missing? Can you point me to some docs or other elements that will help me
> get started?
>
> here's what I have so far:
>
>
> <code-file-set>
> <a href="#" tabTitle="onelink">onelink</a>
> <a href="#" tabTitle="twolink">twolink</a>
> <a href="#" tabTitle="threelink">threelink</a>
> </code-file-set>
>
>
>
>
> <link rel="import" href="../bower_components/polymer/polymer.html">
> <link rel="import" href="/bower_components/core-pages/core-pages.html">
> <link rel="import" href="/bower_components/paper-tabs/paper-tabs.html">
>
>
>
> <polymer-element name="code-file-set">
> <template>
>
> <paper-tabs style="max-width:{{tabBarWidth}}px" id="tabs"
> selected={{selected}}>
> </paper-tabs>
>
> <core-pages selected="{{selected}}">
> <content id="codecontent" select="a"></content>
> </core-pages>
> </template>
>
> <script>
>
> Polymer('code-file-set', {
> domReady: function() {
> var codeNodes = this.$.codecontent.getDistributedNodes();
>
> for (var i = 0; i < codeNodes.length; i++) {
> var name = codeNodes[i].getAttribute('tabTitle');
> var tab = document.createElement('paper-tab');
> tab.innerHTML = name;
> this.$.tabs.appendChild(tab);
> }
>
>
> this.selected = 0;
> this.tabBarWidth = codeNodes.length * 250;
> },
> });
> </script>
> </polymer-element>
>
> This works, but it seems ugly. Namely, can creating the tabs not be done
> in JS but in a more declarative way in the HTML (notice that I create one
> tab per <a> element found in the content). Similarly for the width of the
> max width of the paper tabs.
>
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/9e9c12f9-b5fc-4894-a256-e03e05826a64%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
