javascript - 在哪里编写 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()功能以及 id给您<dom-module>与您的 Polymer() 的值相匹配is属性(property)。类似下面的内容。

代码:

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

答案:

1. 双花括号{{}}是 Polymer 的数据绑定(bind)语法。

2. scrollHandler你问的是你的Polymer()里面的内容在您的 <script> 中运行部分位于自定义元素的最底部，但在 <dom-module> 之外。 Here is an example (现实世界)你的代码应该遵循的结构。 (或者参见上面的代码以获取虚构的理论示例。)

建议:

关于这一切的最好教程是下载 Polymer Seed Element 。然后仔细检查并阅读所有评论(作为事实上的文档)。它将帮助您快速启动并运行并提供您所需的上下文。它包含您理解您提出的问题所需的所有示例代码和解释文档。

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