How do you bind Polymer elements to a Model in ASP

Question

I have no problems displaying my model in a View using Polymer, for example:

        <paper-icon-item>
            <iron-icon icon="communication:phone" item-icon></iron-icon>
            <paper-item-body two-line>
                <div>@Model.PhoneNumber</div>
                <div secondary>Phone Number</div>
            </paper-item-body>
        </paper-icon-item>

but I just do not get the bindings right for input

    //this does not work
    <paper-input label="Phone Number">@Model.PhoneNumber</paper-input>

    //nor this
    <paper-input is="iron-input" label="Phone Number">@Model.PhoneNumber</paper-input>

    //even when I try adding this...
    <script>
        Polymer({
        })
    </script>

...plus a myriad of other attempts. The bindings are not working one or two way (I cannot display existing data or update data)

The controls look correct, they are very cool, animated, etc

Answer 1

You set the text of paper-input by using the value property. Try this

<paper-input label="Phone Number" value="@Model.PhoneNumber"></paper-input>
<paper-input is="iron-input" label="Phone Number" value="@Model.PhoneNumber"></paper-input>

Answer 2

You could bind to the value property of the paper input

<paper-input is="iron-input" label="Phone Number" value="@Model.PhoneNumber" name="PhoneNumber"></paper-input>

And also, for getting the value back to the server (if you are posting your form to the server), you might want to add the name attribute to your input, so that MVC will know how to bind your input to the model property.