Thanks for sharing! Btw, another thing we need to communicate better is about element naming.
The intent of the 'polymer-*' prefix in our stuff is to indicate 'elements made by the polymer team', and not 'element made using polymer'. Because part of the notion of Polymer is that users of an element don't necessarily *need* to know it's made with Polymer (it should Just Work) then don't feel like you need to identify it as such with 'polymer-*' Anyway, just making a note of that. Scott On Fri, Mar 14, 2014 at 5:17 AM, <[email protected]>wrote: > Thanks, worked great! > > If any one wants to take a look at the working code or have some other > advise please feel free: https://github.com/beldar/polymer-tfl-status > > > On Friday, 14 March 2014 10:42:50 UTC, Barak Bar Orion wrote: >> >> You will have to use nested template, see example at: >> https://github.com/Polymer/TemplateBinding/blob/master/ >> examples/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/234c3f37-b0aa-4143-8f0d-49cd625a68b7%40googlegroups.com<https://groups.google.com/d/msgid/polymer-dev/234c3f37-b0aa-4143-8f0d-49cd625a68b7%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/CAHbmOLZgKNdKc9hwJQcHaJ%2Bh%2BP9naokyj7JwM5ecMzJUVcqfBQ%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
