Could you post a slimmed down example on jsbin?
On Thu, Aug 7, 2014 at 2:35 AM, Polymered <[email protected]> wrote: > Hi, > > In my app, I wanted the {{ show }} to be derived from/driven by a child > element attribute. Although the child element attribute publishing works, > it doesn't seem to propagate to the parent template element like so: > > <template if="{{ loginScreen }}"> >> <login-screen page="{{ loginScreen }}"></login-screen> >> </template> > > > and the child element: > > <polymer-element name="login-screen" attributes="page"> >> <template> >> ..... >> >> </template> >> <script> >> Polymer('login-screen', { >> ready: function() { >> this.page = false >> } >> }); >> </script> >> </polymer-element> > > > I based it off here: > http://www.polymer-project.org/articles/communication.html#binding > > My question is: how do I make the parent template conditional to take on > the child published attribute value? > > My objective, BTW, is to handle screen switching using the template > conditionals if that's possible. I did try the app-router and active-route > elements but I couldn't get them to work exactly as intended. > > P.S. > I come from an AngularJS environment so if my question or objective seems > a bit off for Polymer, please show me the light. :) > > Thanks for any insight! > > > On Thursday, March 20, 2014 7:21:27 AM UTC+8, 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/903723f1-9bd4-4e9f-b5d4-796c220a956f%40googlegroups.com > <https://groups.google.com/d/msgid/polymer-dev/903723f1-9bd4-4e9f-b5d4-796c220a956f%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/CAJj5OwCEF6mXAXyRsd1Gq_zOLy4NzYjaWo-oQzYUagQfM88Peg%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
