Event handlers in user-provided templates

[Martin Kleinschrodt]

Hey guys!

I'm trying to build a grid layout component that takes a template and a data array and renders the provided data into a grid layout. The usage is somewhat similar to that of the core-list component:

<grid-layout data="['one', 'two', 'three']" cols="2">
  <template>
    <div>{{ }}</div>
  </template>
</grid-layout>

The problem that I'm facing now is that any event handlers added declaratively to the template are not being registered. So this won't work:

<polmer-element name="x-test">

<template>

<grid-layout data="['one', 'two', 'three']" cols="2">
  <template>
    <div on-tap="{{ itemTapped }}">{{ }}</div>
  </template>
</grid-layout>

</template>

<script>
  Polymer({
    itemTapped: function() {
      alert("An item was tapped!");
    }
  });
</script>

</polymer-element>

I think the reason for this is that unlike the core-list element I'm not using the template as-is but instead remove it from the light dom, put it into another template and then add that template to the light dom. The content is being stamped out just fine but apparently the on-tap handler is not being registered. I think I understand why this happens, the question is: Is there a way to make it work?

Here is the element in action, including the full source code: http://jsbin.com/zodobisaqihi/2/edit

Any help would be greatly appreciated!

Best,

Martin

[Steve Orvell]

It's the PolymerExpressions bindingDelegate that provides declarative event handlers. When using a template raw like this, you'll need to ensure it has the right binding delegate. The element's declaration "element" property contains one you can use, e.g.:

    rowsTempl.bindingDelegate = this.element.syntax;

Here's a working example: http://jsbin.com/zodobisaqihi/3/edit

    

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/c48ef6d8-619e-4e59-a365-366bc6098774%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Martin Kleinschrodt]

I was hoping it would be something simple like this. Thanks!