This article rocks, thanks Zeno :D
On Thu, Mar 20, 2014 at 11:11 AM, Zeno Rocha <[email protected]> wrote: > About element naming Scott, I wrote an article on WebComponents.org: > > http://webcomponents.github.io/articles/how-should-i-name-my-element/ > > > On Wednesday, March 19, 2014 8:21:27 PM UTC-3, Eric Bidelman wrote: > >> Correct. >> On Mar 19, 2014 6:13 PM, "Sergey Shevchenko" <[email protected]> wrote: >> >>> I think it can be just: >>> >>> <template if="{{ show }}"> >>> >>> -- the 'bind' part is unnecessary. True or false? >>> >>> On Friday, March 14, 2014 3:42:50 AM UTC-7, Barak Bar Orion wrote: >>>> >>>> You will have to use nested template, see example at: >>>> https://github.com/Polymer/TemplateBinding/blob/master/examp >>>> les/how_to/conditional_template.html >>>> >>>> >>>> <template id="example" bind> >>>> <span>Show?: <input type="checkbox" checked="{{ show }}"></span> >>>> <template bind if="{{ show }}"> >>>> <span>Yay! I'm shown</span> >>>> </template> >>>> >>>> </template> >>>> >>>> Other from that you can use conditional attribute inside template: >>>> hidden?="{{ hide }}" >>>> see: >>>> https://github.com/Polymer/TemplateBinding/blob/master/examples/how_to/conditional_attributes.html >>>> >>>> On Friday, March 14, 2014 12:17:41 PM UTC+2, >>>> [email protected] wrote: >>>>> >>>>> Hi Scott, >>>>> >>>>> Thanks for the reply, another small question if I may, >>>>> >>>>> I can't find anywhere how to create an IF statement in the Polymer >>>>> templating system, I would like to do something like: >>>>> >>>>> {{if line.disruptions}} >>>>> <ul class"line-disruptions">....</ul> >>>>> {{endif}} >>>>> >>>>> >>>>> How is that done? >>>>> >>>>> Thanks! >>>>> >>>>> >>>>> On Friday, 14 March 2014 05:47:16 UTC, Scott Miles wrote: >>>>>> >>>>>> Thanks for the follow up question. That model-from-event expression >>>>>> is critical information that we (engineering) haven't communicated >>>>>> properly. >>>>>> >>>>>> >>>>>> On Thu, Mar 13, 2014 at 10:38 PM, Michael Bleigh <[email protected]>wrote: >>>>>> >>>>>>> Good to know! Thanks. >>>>>>> >>>>>>> >>>>>>> On Thu, Mar 13, 2014 at 10:17 PM, Scott Miles <[email protected]>wrote: >>>>>>> >>>>>>>> First off, I gave the example on the wrong element, I believe this >>>>>>>> is more accurately what was asked for: >>>>>>>> >>>>>>>> <ul class="line-disruptions" on-tap="{{tapHandler}}"> >>>>>>>> >>>>>>>> >>>>>>>> >> would it be possible to make tapHandler aware of the specific >>>>>>>> disruption instance >>>>>>>> >>>>>>>> Yes. The handler can do: >>>>>>>> >>>>>>>> tapHandler: function(event) { >>>>>>>> // get the specific `line` object associated with the target >>>>>>>> element >>>>>>>> var line = event.target.templateInstance.model; >>>>>>>> >>>>>>>> // do stuff with `line` >>>>>>>> ... >>>>>>>> >>>>>>>> } >>>>>>>> >>>>>>>> >>>>>>>> Scott >>>>>>>> >>>>>>>> P.S. This expression `event.target.templateInstance.model` is so >>>>>>>> handy that we plan on sugaring it in the near future, maybe by >>>>>>>> promoting >>>>>>>> the `model` property to the `event` object, or possibly as another >>>>>>>> argument >>>>>>>> to the handler. >>>>>>>> >>>>>>>> >>>>>>>> On Thu, Mar 13, 2014 at 9:32 PM, Michael Bleigh >>>>>>>> <[email protected]>wrote: >>>>>>>> >>>>>>>>> This isn't 100% related, but in the event of a declarative event >>>>>>>>> in a repeat, is there any way to pass non-rendered data through to the >>>>>>>>> event handler? For instance, in the example given, would it be >>>>>>>>> possible to >>>>>>>>> make tapHandler aware of the specific disruption instance short of >>>>>>>>> passing >>>>>>>>> some kind of index reference via data attributes etc. >>>>>>>>> >>>>>>>>> On Thursday, March 13, 2014 2:18:38 PM UTC-7, Scott Miles wrote: >>>>>>>>> >>>>>>>>>> The easiest way is to use Polymer's declarative event sugaring: >>>>>>>>>> >>>>>>>>>> <li class="line-disruption {{disruption.class}}" >>>>>>>>>> *on-tap="{{tapHandler}}"*>{{disruption.from}} to {{disruption.to}}: >>>>>>>>>> {{disruption.status}}</li> >>>>>>>>>> >>>>>>>>>> See here for documentation: http://www.polymer-project.org >>>>>>>>>> /docs/polymer/polymer.html#declarative-event-mapping >>>>>>>>>> >>>>>>>>>> >> this.shadowRoot.querySelectorAll('ul.line-disruptions') >>>>>>>>>> >>>>>>>>>> This should work, as long as those elements exist at the time you >>>>>>>>>> perform the query. IOW, only after the template has stamped actual >>>>>>>>>> 'ul' >>>>>>>>>> elements will you be able to query for them. >>>>>>>>>> >>>>>>>>>> >>>>>>>>>> On Thu, Mar 13, 2014 at 4:14 AM, Martà Planellas < >>>>>>>>>> [email protected]> wrote: >>>>>>>>>> >>>>>>>>>>> Hi all, I've been fighting this for a while, I have this html in >>>>>>>>>>> my polymer element: >>>>>>>>>>> >>>>>>>>>>> <div class="container"> >>>>>>>>>>> <ul class="lines"> >>>>>>>>>>> <template id="line" repeat="{{line in lines}}"> >>>>>>>>>>> <li class="line {{line.class}}"> >>>>>>>>>>> <div class="line-label"> >>>>>>>>>>> <span class="line-name >>>>>>>>>>> {{line.nameclass}}"> >>>>>>>>>>> {{line.name}} >>>>>>>>>>> </span> >>>>>>>>>>> <span class="line-status {{line.class}}"> >>>>>>>>>>> {{line.status}} >>>>>>>>>>> </span> >>>>>>>>>>> </div> >>>>>>>>>>> <ul class="line-disruptions"> >>>>>>>>>>> <template id="disruption" >>>>>>>>>>> repeat="{{disruption in line.disruptions}}"> >>>>>>>>>>> <li class="line-disruption >>>>>>>>>>> {{disruption.class}}">{{disruption.from}} to {{disruption.to}}: >>>>>>>>>>> {{disruption.status}}</li> >>>>>>>>>>> </template> >>>>>>>>>>> </ul> >>>>>>>>>>> </li> >>>>>>>>>>> </template> >>>>>>>>>>> </ul> >>>>>>>>>>> </div> >>>>>>>>>>> >>>>>>>>>>> So there're two nested templates, now I want to add some click >>>>>>>>>>> event on the *ul.line-disruptions* elements, but I have no idea >>>>>>>>>>> how to get to these elements... >>>>>>>>>>> >>>>>>>>>>> I tried this.shadowRoot.querySelectorAll('ul.line-disruptions') >>>>>>>>>>> but nothing is returned. >>>>>>>>>>> >>>>>>>>>>> How do I access those nodes? >>>>>>>>>>> >>>>>>>>>>> Thanks. >>>>>>>>>>> >>>>>>>>>>> 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/76621c93-187f- >>>>>>>>>>> 4810-a3ef-026c080b4383%40googlegroups.com<https://groups.google.com/d/msgid/polymer-dev/76621c93-187f-4810-a3ef-026c080b4383%40googlegroups.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/6edef541-f33d- >>>>>>>>> 44f7-b976-d2d1f1379806%40googlegroups.com<https://groups.google.com/d/msgid/polymer-dev/6edef541-f33d-44f7-b976-d2d1f1379806%40googlegroups.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/254b38dd-fbd5-416d-9fa8-975240d4d5a4% >>> 40googlegroups.com<https://groups.google.com/d/msgid/polymer-dev/254b38dd-fbd5-416d-9fa8-975240d4d5a4%40googlegroups.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/8ecba2a5-ef71-4c0c-81a0-4c811e4b97c1%40googlegroups.com<https://groups.google.com/d/msgid/polymer-dev/8ecba2a5-ef71-4c0c-81a0-4c811e4b97c1%40googlegroups.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/CAJj5OwBPmLZJe_%2Bs7MFpUBqwhWPteAZNJCOnB5dN0dR85iw68w%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
