How To Access Polymer Custom Element From Callback

polymer

Solution

You can use `bind` to attach a `this` context to any function, so:

   li.addEventListener('click', function(e) {
      this.dataSelected(e.target.innerText);
    }.bind(this));

http://jsbin.com/xorex/4/edit

But you can make things easier by using more Polymer sugaring. For example, you can publish data and use the observation system, like so:

<polymer-element name="my-element" attributes="data">
...
    data: [], // type hint that data is an array
...
    dataChanged: function() { // formerly setData

http://jsbin.com/xorex/5/edit

Also, you can use the built-in event system instead of `addEventListener`

<polymer-element name="my-element" attributes="data">
  ...
  <ul id="my_data" on-tap="{{dataTap}}"></ul>
  ...
    dataTap: function(e) { // `tap` supports touch and mouse
      if (e.target.localName === 'li') {
        this.dataSelected(e.target.textContent);
      }
    }

http://jsbin.com/xorex/6/edit

But the biggest win is using `<template repeat>` instead of creating elements in JavaScript. At that point, the complete element can look like this:

<polymer-element name="my-element" attributes="data">
<template>

  <ul id="my_data">
    <template repeat="{{item in data}}">
      <li on-tap="{{dataTap}}">{{item}}</li>
    </template>
  </ul>

</template>
<script>

  Polymer('my-element', {
    data: [],

    dataTap: function(e) {
      console.log('dataSelected: ' + e.target.textContent);
    }
  });

</script>
</polymer-element>

http://jsbin.com/xorex/7/edit

Problem

I need to access the custom element and call its method from the click event callback. ``` <polymer-element name="my-element"> <template> <style type="text/css" media="screen"> ... </style> <ul id="my_data"></ul> </template> <script> Polymer('my-element', { dataSelected: function(selectedText) { //... }, setData: function(data) { for (var i = 0; i < data.length; i++) { var li = document.createElement('li'); li.addEventListener('click', function(e) { // how can I call dataSelected() from here? }); li.innerText = data[i]; this.$.my_data.appendChild(li); } } }); </script> </polymer-element> ``` How can I call the custom element's `dataSelected()` method from the callback?

Original source