javascript - 无法使用 Polymer Neon 动画设置 null 的属性 '_onButtonClick'

Question

我对 Polymer 和 JS 还很陌生，但我一直在努力适应这两者。使用this demo作为基础，我一直在尝试使用 NEON 动画和按钮单击事件将缩小动画附加到某些图标。每当我尝试使用 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>

Answer 1

• dom-bind templates仅在 index.html 中需要。在 <dom-module> ，您可以只使用简单的 <template> .

• 至 register your element ，您需要使用 Polymer具有原型(prototype)对象的函数，该对象具有 _onButtonClick功能如下:

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

• Auto-node finding允许您通过 ID this.$.NODE_ID 快速访问节点(例如 this.$.myIcon )。所以，如果你的<icon-toggle> ID 为“starIcon”:

  ...您可以使用 this.$.starIcon 从 Polymer 对象访问它:

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