CODEWITHSUNDEEP
javascriptpolymer
Jan Aerts
Jan Aerts

Reputation: 91

paper-input binding in dom-bind

I'm trying to combine 2 paper elements in my index.html (within a dom-bind) but can't find out the right syntax for this. I think I've tried all combinations mentioned in the Polymer binding documentation... In this simple example, the elevation of a paper-material element should be set by what's put into a paper-input (i.e. a value between 1 and 5). Can someone provide me the correct syntax for this?

My code:

<html>
<head>
  ...loading necessary components...
</head>
<body>
    <template is="dom-bind">
        <paper-input id="input" label="label"></paper-input>
        <paper-material elevation$="{{this.$.input.value}}">
            Some text here...
        </paper-material>
    </template>
</body>
</html>

Upvotes: 0

Views: 525

Answers (1)

peduxe
peduxe

Reputation: 946

When binding to elements that don't inherit/extend from native HTMLElements you shouldn't use the dollar sign. You can too bind directly an input to a property, below is an example: 

<paper-input value="{{elevation::input}}">
<!-- or -->
<paper-input bind-value="{{elevation}}">

Here is a working example validating the elevation the user wants to set.

Upvotes: 1

Related Questions