That worked great. Thanks so much all for the newbie help! On Thu Jan 08 2015 at 9:10:05 AM Arthur Evans <[email protected]> wrote:
> Hi Aleem, > > To find out when your custom element's (light DOM) children are > manipulated, you can use a mutation observer. Polymer provides a > convenience method for setting this up, described here: > > https://www.polymer-project.org/docs/polymer/polymer.html#onMutation > > You can access the children all the usual ways, but if you're specifically > looking for the children that get distributed through your insertion point > (<content> element), the content element provides a getDistributedNodes() > method. This is discussed in the FAQ: > > https://www.polymer-project.org/resources/faq.html#accessContentDOM > > Thanks, > Arthur > > > On Wed, Jan 7, 2015 at 10:59 PM, Aleem Mawani <[email protected]> > wrote: > >> Thanks so much! That was very helpful. >> >> One follow up question, this does not handle the case where more content >> nodes are added after the element is initialized. Tried to find the answer >> to this in the docs to no success. >> >> As for the question of what does creating this custom element buy me, you >> might be right in that there doesn't seem to b huge benefits in this case. >> The way I posted the code had some simplifications to what I'm doing and >> I'd like to encapsulate the extra functionality in my custom element. >> >> Even without that extra functionality I might still do it, as I'd be >> using this custom element many times on a single page and its half the >> lines of markup and easier to read when encapsulated in the custom element. >> > >> >> >> >> >> On Wed Jan 07 2015 at 7:05:59 PM Dennis Coldwell < >> [email protected]> wrote: >> >>> 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/CAApOkstqnapfejU6Rsuh%3DfcuQmu3SH40MuEX2bmM-cn9MtZU%3DA%40mail.gmail.com >> <https://groups.google.com/d/msgid/polymer-dev/CAApOkstqnapfejU6Rsuh%3DfcuQmu3SH40MuEX2bmM-cn9MtZU%3DA%40mail.gmail.com?utm_medium=email&utm_source=footer> >> . > > >> For more options, visit https://groups.google.com/d/optout. >> > 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/CAApOksu56AT_Zu0hB18OjFeSUqen7kBRL3MbW6n3PCFRBeAJOA%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
