无法用聚合物霓虹动画设置属性'_onButtonClick'为空

我对聚合物和JS很新，但我一直在尝试去适应两者。使用this demo作为基础，我一直在尝试使用霓虹动画和按钮单击事件将缩小动画附加到某些图标上。每当我尝试使用querySelector查找包含该按钮的模板，它总是返回：无法用聚合物霓虹动画设置属性'_onButtonClick'为空

"icon-toggle-demo.html:34 Uncaught TypeError: Cannot set property '_onButtonClick' of null"

无论我改变我只是不能按钮不能为空。我不确定我在这里错过了什么。

<link rel="import" href="../../polymer/polymer.html"> 
<link rel="import" href="../../iron-icons/iron-icons.html"> 
<link rel="import" href="../icon-toggle.html"> 


<dom-module id="icon-toggle-demo"> 
    <template is="dom-bind"> 
     <style> 
      :host { 
       font-family: sans-serif; 
      } 

      ; 
     </style> 

     <h3>Statically-configured icon-toggles</h3> 
     <button on-click="_onButtonClick">click me</button> 
     <icon-toggle toggle-icon="star"></icon-toggle> 
     <icon-toggle toggle-icon="star" pressed></icon-toggle> 

     <h3>Data-bound icon-toggle</h3> 

     <!-- use a computed binding to generate the message --> 
     <div><span>[[message(isFav)]]</span></div> 


     <!-- curly brackets ({{}}} allow two-way binding --> 
     <icon-toggle toggle-icon="favorite" pressed="{{isFav}}"></icon-toggle> 
    </template> 

    <script> 
     var scope = document.querySelector('template[is="dom-bind"]'); 

     scope._onButtonClick = function(event) { 
      var node = document.querySelector('toggle-icon'); 
      if (node) { 
       node.animate(); 
      } 
     }; 
    </script> 

</dom-module>

来源

2016-06-27 Taylor

dom-bind templates只需要index.html：包含按钮

我的文件。在<dom-module>中，您可以使用简单的<template>。
为register your element，你需要使用Polymer功能连同注明_onButtonClick功能这样一个原型对象：
```
Polymer({ 
    is: 'icon-toggle-demo', 
    _onButtonClick: function() { 
    ... 
    } 
}); 
```
Auto-node finding让您快速通过ID与this.$.NODE_ID访问节点（例如，this.$.myIcon）。所以，如果你有<icon-toggle>的 “starIcon” 的ID：

...你可以从你的聚合物物体this.$.starIcon访问：
```
_onButtonClick: function() { 
    this.$.starIcon.animate(); 
} 
```

你的全元素定义会看起来像这样：

<dom-module id="icon-toggle-demo"> 
    <template> 
    <style> 
     :host { 
     font-family: sans-serif; 
     } 
    </style> 

    <h3>Statically-configured icon-toggles</h3> 
    <button on-click="_onButtonClick">click me</button> 
    <icon-toggle id="starIcon" toggle-icon="star"></icon-toggle> 
    <icon-toggle toggle-icon="star" pressed></icon-toggle> 

    <h3>Data-bound icon-toggle</h3> 

    <!-- use a computed binding to generate the message --> 
    <div><span>[[message(isFav)]]</span></div> 

    <!-- curly brackets ({{}}} allow two-way binding --> 
    <icon-toggle toggle-icon="favorite" pressed="{{isFav}}"></icon-toggle> 
    </template> 

    <script> 
    Polymer({ 
     is: 'icon-toggle-demo', 
     _onButtonClick: function() { 
     this.$.starIcon.animate(); 
     } 
    }); 
    </script> 
</dom-module>

来源

2016-06-27 18:17:08 tony19

谢谢！这在了解所有这些工作如何是非常重要的。直到现在还不确定这个dom-bind！ – Taylor

@泰勒没问题:) – tony19

无法用聚合物霓虹动画设置属性'_onButtonClick'为空

回答

相关问题