プロパティを設定できません「_onButtonClick」ヌルのポリマーネオンアニメーション

Question

と私は、ポリマーとJSにかなり新しいんだけど、私は両方に慣れるしようとしてきました。ベースとしてthis demoを使用して、私はネオンアニメーションやボタンのクリックイベントを使用して一部のアイコンに縮小アニメーションを添付しようとしてきました。私は、ボタンを含むテンプレートを見つけることquerySelectorを使用しようとするたびに、それは常に返しません：

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

をどんなに私はちょうどボタンが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> 

Answer 1

• dom-bind templatesだけindex.htmlで必要とされます。 <dom-module>で、あなただけのプレーンな<template>を使用することができます。 register your elementへ

• 、あなたはこのようなあなたの_onButtonClick機能を持つプロトタイプオブジェクトでPolymer機能を使用する必要があります：

  Polymer({ 
      is: 'icon-toggle-demo', 
      _onButtonClick: function() { 
      ... 
      } 
  }); 
  

• Auto-node finding（あなたがすぐにthis.$.NODE_IDでIDによってノードにアクセスすることができます例えば、this.$.myIcon）。あなたはthis.$.starIconとあなたの高分子オブジェクトからアクセスすることができ...

  ：

  _onButtonClick: function() { 
      this.$.starIcon.animate(); 
  } 
  

あなたの完全な要素の定義は希望だから、あなたの<icon-toggle>場合は "starIcon" のIDを持っていましたこのような何かを見て：

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