Where to write Polymer's handler function

Question

I just started on Polymer and there are things I hope can get clarification on. For example, in this documentation: https://elements.polymer-project.org/elements/paper-header-panel. In the last card about Events, there is a script that when content-scroll is triggered. However, I have no idea where to put that script and why double curly brace {{}} is used. If there is a documentation on this it would be great! Thanks.

These are the places that I have tried to put that script:

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

You will also need to add is and properties properties to your Polymer() function as well as an id to your <dom-module> that matches the value of your Polymer() is property. Something like the following.

Code:

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

Answers:

1. Double curly braces {{}} is Polymer's data-binding syntax.

2. The scrollHandler you ask about goes inside your Polymer() function in your <script> section at the very bottom of your custom element but outside your <dom-module>. Here is an example (real world) of the structure your code should follow. (Or see above code for a made-up theoretical example.)

Suggestions:

The best tutorial you can get on all of this is to download the Polymer Seed Element. Then look it over and read all the comments (which serves as de facto documentation). It will get you up and running quickly and provide the context you need. It has all the sample code and explanatory documentation you need to make sense of the question you asked.

You should also download the Polymer Starter Kit. If you haven't done so already. Again, follow the code and it will answer most of the questions you have asked here plus others you don't even know to ask yet.