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]
> <javascript:>> 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/
>>> 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] <javascript:>.
>> 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.
For more options, visit https://groups.google.com/d/optout.
