Polymer.js双向绑定到textarea值 [英] Polymer.js two-way binding to textarea value

问题描述

在0.5版本中很简单：

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>

在版本1.0中，此绑定不起作用。只写一次作品而且很奇怪，只有一次。
v1.0代码：

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>

现在我使用set \get文本，但它不是属性，只能从JS获得。

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

在iron-autogrow-textarea中写道：因为textarea的value属性是不可观察的，所以你应该使用这个元素的bind-value代替命令式更新。
但为什么0.5 textarea的值是可观察的？

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?

推荐答案

要绑定到Polymer 1.0中的输入值add ::在您绑定的变量之后输入。

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

示例：

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

这是 plnkr上的一个工作示例

像iron-input这样的元素使用bind-input属性自动绑定变量。

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

更多信息在双向绑定

这篇关于Polymer.js双向绑定到textarea值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！