How to bind events to nested template elements

[Martí Planellas]

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.

[Scott Miles]

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.

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 polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/76621c93-187f-4810-a3ef-026c080b4383%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Michael Bleigh]

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.

[Scott Miles]

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.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/6edef541-f33d-44f7-b976-d2d1f1379806%40googlegroups.com.

[Michael Bleigh]

Good to know! Thanks.

[Scott Miles]

Thanks for the follow up question. That model-from-event expression is critical information that we (engineering) haven't communicated properly.

[marti.p...@acknowledgement.co.uk]

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!

[Barak Bar Orion]

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

[marti.p...@acknowledgement.co.uk]

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

[Scott Miles]

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

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/234c3f37-b0aa-4143-8f0d-49cd625a68b7%40googlegroups.com.

[Barak Bar Orion]

Hi Scott.

First thanks for the good work!

Do you know if there is a plan to add some kind of name mapping to the html import

something like:

<link rel="import" href="goodies.html" with-prefix:foo>

That will add the prefix foo to every elements defined in goodies.html 

that way it will be possible to use components without name collisions.

Barak.

[Martí Planellas]

Ok Scott,

Thanks for clearing that out, I'll change it

Martí

El 14/03/2014, a les 16.17, Scott Miles <sjm...@google.com> va escriure:

You received this message because you are subscribed to a topic in the Google Groups "Polymer" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/polymer-dev/jR6SIU3HsNQ/unsubscribe.
To unsubscribe from this group and all its topics, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAHbmOLZgKNdKc9hwJQcHaJ%2Bh%2BP9naokyj7JwM5ecMzJUVcqfBQ%40mail.gmail.com.

[Scott Miles]

There's definitely awareness of this issue. I believe it's not quite as easy as you suggest because of the interconnectedness of elements.

IOW, elements and style sheets tend to refer to other elements by name, and it's potentially difficult to modulate all possible references to a name at run-time like that.

But as I say, we recognize this problem and will include your suggestion in the discussions.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/ac07a555-5389-449c-a637-ed86f6daa8db%40googlegroups.com.

[Sergey Shevchenko]

I think it can be just:

      <template if="{{ show }}">

-- the 'bind' part is unnecessary. True or false?

[Eric Bidelman]

Correct.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/254b38dd-fbd5-416d-9fa8-975240d4d5a4%40googlegroups.com.

[Zeno Rocha]

About element naming Scott, I wrote an article on WebComponents.org:

http://webcomponents.github.io/articles/how-should-i-name-my-element/

[Rob Dodson]

This article rocks, thanks Zeno :D

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/8ecba2a5-ef71-4c0c-81a0-4c811e4b97c1%40googlegroups.com.

[Scott Miles]

Beauty, thanks #2. 

Especially like the Heisenberg.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAJj5OwBPmLZJe_%2Bs7MFpUBqwhWPteAZNJCOnB5dN0dR85iw68w%40mail.gmail.com.

[Polymered]

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!

[Rob Dodson]

Could you post a slimmed down example on jsbin? 

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/903723f1-9bd4-4e9f-b5d4-796c220a956f%40googlegroups.com.