Polymer get the value from a paper input element

Question

I have just started exploring polymer.js. I want to get name from paper-input element. It isn't working the alert is empty.

<dom-module id="hello-world">
<template>
    <h1> Hello [[name]]</h1>
    <paper-input value="{{name}}"></paper-input>
    <button onClick="{{getData}}">Get data</button>
</template>
<script>
    Polymer({
        is: "hello-world",
        properties: {
            name: {
                type: String,
                value: '1'
            }
        },
        getData: function () {
            alert(this.name);
        }
    })
</script>

Answer 1

If you want onClick event, use on-click="getData" in polymer template.

....To add event listeners to local DOM children, use on-event annotations in your template. This often eliminates the need to give an element an id solely for the purpose of binding an event listener.

Because the event name is specified using an HTML attribute, the event name is always converted to lowercase. This is because HTML attribute names are case insensitive. So specifying on-myEvent adds a listener for myevent. The event handler name (for example, handleClick) is case sensitive. To avoid confusion, always use lowercase event names.

DEMO