更简单的回答

Question

我试图了解Polymer。显然，自定义元素是整个沙邦的关键。我确实建了一些，有些正在工作，我只是无法让他们做我想做的事。

BTW我使用的是0.5版本。为什么，仅仅因为我懒得改变。

这是我的问题。

我希望在点击链接时弹出Paper-Dialog。当代码直接在Index.html页面中时，它可以很好地工作。但是，当我将它自定义为自定义元素时，它无法找到我的Javascript事件。

我在控制台中收到此错误：

“未捕获的ReferenceError：未定义toggleDialog”

我知道这是由于我不理解的事情。但我很难掌握聚合物的细节。

这是我想要做的代码。

<polymer-element name="cvirt-reader" attributes="content" >
  <template>   
    <a href="#" onclick="toggleDialog()">Read</a>    

    <div id="HelpDialog">   
      <paper-dialog  id="dlgHelper"  heading="Bottom Dialog" transition="paper-dialog-transition-bottom">
        <a href="#"><IMG src="/cvirtAnimee.gif"></a>
        <paper-button label="Fermer" affirmative autofocus></paper-button>
      </paper-dialog>
    </div>

  </template>
  <script>
  Polymer('cvirt-reader', {
      toggleDialog: function(e) {
        this.$.dlgHelper.toggle();
      }
    });
</script>
</polymer-element>

Answer 1

更简单的回答

Polymer使用on-<event name>属性提供declarative event mapping将元素的方法绑定到事件：

<a href="#" on-click="{{toggleDialog}}">Read</a>

只要您正确命名属性，它就可以用于任何事件;聚合物将完成其余的工作。

原始答案

我认为您不能将onclick属性设置为不在全局范围内的函数。也许你应该尝试使用ready函数绑定一个监听器（read对于你的第一个id元素是a：

Polymer('cvirt-reader', {
    ready: function () {
        this.$.read.addEventListener('click', this.toggleDialog.bind(this), false);
    },
    toggleDialog: function(e) {
        this.$.dlgHelper.toggle();
    }
});

问题是：当使用onclick="toggleDialog()"时，您的浏览器将在全局范围内查找toggleDialog函数，而它实际上是您的Polymer元素的属性，因此不在全局范围内，导致ReferenceError。

通过从ready函数内部绑定事件侦听器，您可以从当前范围访问所需的所有内容，即：您可以找到toggleDialog到this并将其添加为事件监听。

请注意使用.bind(this)会强制this引用Polymer元素而不是toggleDialog中的事件。

Answer 2

从onclick="toggleDialog()"

中删除（）

如果您这样写，应该有效：on-click="toggleDialog"

找不到自定义元素javascript函数

2 个答案:

更简单的回答

原始答案