Polymer.js two-way binding to textarea value

Question

In version 0.5 it was easy:

<polymer-element name="textarea-tpl" attributes="value placeholder">
    <template>
        <link rel="stylesheet" type="text/css" href="css/index.css">

        <textarea id="textarea" value="{{value}}" placeholder="{{placeholder}}"></textarea>
        <textarea id="hidden_textarea"></textarea>
    </template>
    <script>
        Polymer({
            ready: function() {
                var text = this.$.textarea;
                var hidden_text = this.$.hidden_textarea;

                text.onkeyup = function() {
                    hidden_text.value = text.value + "\n";
                    var height = hidden_text.scrollHeight;
                    text.style.height = height+'px';
                };
            }
        });
    </script>
</polymer-element>

In version 1.0 this binding doesn't work. Only write works and which is strange, only one time. Code for v1.0:

<dom-module id="chat-textarea">
    <template>
        <textarea id="textarea" value="{{value}}" placeholder="{{placeholder}}"></textarea>
        <textarea id="hidden_textarea"></textarea>
    </template>

    <script>
        Polymer({
            is: "chat-textarea",
            properties: {
                value: String,
                placeholder: String
            },

            set text(val) {
                this.$.textarea.value = val;
            },
            get text() {
                return this.$.textarea.value;
            },

            ready: function() {
                var text = this.$.textarea;
                var hidden_text = this.$.hidden_textarea;

                text.onkeyup = function() {
                    hidden_text.value = text.value + "\n";
                    var height = hidden_text.scrollHeight;
                    text.style.height = height+'px';
                };
            }
        });
    </script>
</dom-module>

Now I use set\get text, but it's not property and available only from JS.

In iron-autogrow-textarea is written: Because the textarea's value property is not observable, you should use this element's bind-value instead for imperative updates. But why in 0.5 textarea's value was observable?

Mcmurray

Answer 1

To bind to an inputted value in Polymer 1.0 add ::input after the variable you're binding to.

Example:

  <textarea value="{{taValue::input}}"></textarea>

Here is a working example on plnkr

Elements like iron-input use the bind-input attribute to automatically bind the variable.

More info is in the docs for two-way binding

Jeanene

Thanks. I was seeing iron-autogrow-textarea github.com/PolymerElements/iron-autogrow-textarea/blob/master/… There is using listeners and observer. Your option is much easier. – Mcmurray

Agree, use <iron-autogrow-textarea bind-value="{{value}}" laceholder="{{placeholder}}"></iron-autogrow-textarea> – Wharton