在哪里编写 Polymer 的处理函数

Question

我刚刚开始学习 Polymer，有些事情我希望得到澄清。例如，在本文档中：https://elements.polymer-project.org/elements/paper-header-panel。在关于事件的最后一张卡片中，有一个脚本，用于触发内容滚动。但是，我不知道将该脚本放在哪里以及为什么使用双花括号 {{}} 。如果有这方面的文档那就太好了！谢谢

这些是我尝试放置该脚本的地方：

<!-- Uncaught SyntaxError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'undefined'. The type name is invalid. -->
<script>
(function() {
    Polymer ({
        navigationbarScrollHandler: function(event) {
            var scroller = event.detail.target;
            console.log(scroller.scrollTop);
        }
    });
})();
</script>

<!-- Uncaught SyntaxError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'undefined'. The type name is invalid. -->
<script>
    Polymer ({
        navigationbarScrollHandler: function(event) {
            var scroller = event.detail.target;
            console.log(scroller.scrollTop);
        }
    });
</script>

<!-- Uncaught NotSupportedError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'paper-header-panel'. A type with that name is already registered. -->
<script>
    Polymer ({
        is: "paper-header-panel",

        navigationbarScrollHandler: function(event) {
            var scroller = event.detail.target;
            console.log(scroller.scrollTop);
        }
    });
</script>

<!-- Uncaught SyntaxError: Unexpected token ( -->
<script>
        navigationbarScrollHandler: function(event) {
            var scroller = event.detail.target;
            console.log(scroller.scrollTop);
        }
</script>

<!-- console doesn't log anything -->
<script>
    Polymer ({
        is: "custom-element",

        navigationbarScrollHandler: function(event) {
            var scroller = event.detail.target;
            console.log(scroller.scrollTop);
        }
    });
</script>

Answer 1

您还需要将 is 和 properties 属性添加到您的 Polymer() 函数，并向您的 <dom-module> 添加一个 id 匹配你的 Polymer() is 属性的价值。类似下面的内容。

代码：

<dom-module id="my-example-element">
  <style>
  ...
  </style>
  <template>
  ...
  </template>
</dom-module>
<script>
(function() {
    Polymer ({
      is: 'my-example-element',
      properties: {
        // See and follow examples
        },
        navigationbarScrollHandler: function(event) {
            var scroller = event.detail.target;
            console.log(scroller.scrollTop);
        }
    });
})();
</script>

答案：

双花括号 {{}} 是 Polymer 的数据绑定语法。
您询问的 scrollHandler 位于自定义元素最底部的 <script> 部分的 Polymer() 函数内，但在 [=15 之外=]. Here is an example（现实世界）你的代码应该遵循的结构。 （或者参见上面的代码以获得虚构的理论示例。）

建议：

有关所有这些内容的最佳教程是下载 Polymer Seed Element。然后查看并阅读所有评论（作为事实上的文档）。它会让您快速运行并提供您需要的上下文。它包含您理解所问问题所需的所有示例代码和解释性文档。

您还应该下载 Polymer Starter Kit。如果您还没有这样做的话。同样，按照代码进行操作，它将回答您在这里提出的大部分问题以及您甚至不知道要问的其他问题。

在哪里编写 Polymer 的处理函数

Where to write Polymer's handler function

javascript

polymer