Javascript 无法设置属性'_ON按钮单击'；使用聚合物霓虹灯动画设置空值

我对Polymer和JS还很陌生，但我一直在努力适应这两种。作为基础，我一直在尝试使用霓虹灯动画和按钮单击事件将缩放动画附加到一些图标。每当我尝试使用querySelector查找包含按钮的模板时，它总是返回：

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

：主持人{
字体系列：无衬线；
}
;
静态配置图标切换
点击我
数据绑定图标切换
[[信息（isFav）]]
var scope=document.querySelector（'template[is=“dom bind”]”）；
作用域。\u onButtonClick=功能（事件）{
var节点=document.querySelector（'toggle-icon'）；
如果（节点）{
node.animate（）；
}
};

• 仅在

  index.html

  中需要。在
  中，您可以只使用普通的

• 要执行此操作，您需要将

  Polymer

  函数与具有

  \u onbutton的原型对象一起使用，如下所示：
  
  Polymer({
    is: 'icon-toggle-demo',
    _onButtonClick: function() {
      ...
    }
  });
  
  <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>
  
  

• 允许您使用

  this.$.node\u ID

  （例如

  this.$.myIcon

  ）通过ID快速访问节点。因此，如果您的
  的ID为“starIcon”：
  …您可以使用

  this.$从聚合物对象访问它。starIcon

  ：

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

您的完整元素定义如下所示：

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

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

：主持人{
字体系列：无衬线；
}
静态配置图标切换
点击我
数据绑定图标切换
[[信息（isFav）]]
聚合物({
是：“图标切换演示”，
_onButtonClick:function（）{
这是$.starIcon.animate（）；
}
});

谢谢！这对于了解这一切是如何运作的非常重要。直到现在还不确定dom绑定@泰勒：没问题：）