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/5c74e6b6-fd4c-4e99-870c-47b41910feb7%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
