如何从回调访问Polymer自定义元素 [英] How To Access Polymer Custom Element From Callback

问题描述

我需要访问自定义元素并从click事件回调中调用其方法.

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>

如何从回调中调用自定义元素的dataSelected()方法?

How can I call the custom element's dataSelected() method from the callback?

推荐答案

您可以使用bind将this上下文附加到任何函数，因此:

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

此外，您可以使用内置事件系统来代替addEventListener

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

但是最大的胜利是使用<template repeat>而不是在JavaScript中创建元素.那时，complete元素可能看起来像这样:

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

这篇关于如何从回调访问Polymer自定义元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！