Polymer .js two-way binding to textarea value

Question

In version 0.5, this 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 does not work. They only write works, and this is strange, only once. Code for version 1.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 is not property and is only available from JS.

The iron-autogrow-textarea file says: since the textarea value property is not observable, you should use this element binding value instead of mandatory updates. But why was observed in a 0.5 text value?

Answer 1

To bind to the entered value in Polymer 1.0 add :: input after the variable to which you are bound.

Example:

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

Here is a working example on plnkr

Elements, such as iron input, use the bind-input attribute to automatically bind a variable.

For more information, see two-way binding documents.