Polymer 如何从回调中访问自定义元素

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

<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>

...

聚合物（“my-element”{
dataSelected:函数（selectedText）{
//...
},
setData：函数（数据）{
对于（变量i=0；i

---

如何从回调调用自定义元素的

dataSelected（）

方法？

您可以插入

element=this并调用
元素.dataSelected（）

但我认为，为了实现目标，最好使用重复模板（）和直接绑定到click handler函数（）。
您可以使用
bind
将
此
上下文附加到任何函数，因此：

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


但是你可以通过使用更多的聚合物糖化来让事情变得更容易。例如，可以发布数据并使用观测系统，如下所示：

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


但是最大的胜利是使用
而不是在JavaScript中创建元素。此时，完整的元素可以如下所示：

<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>



{{item}

聚合物（“my-element”{
数据：[]，
数据点击：功能（e）{
log（'dataSelected:'+e.target.textContent）；
}
});


<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>