Polymer.js双向绑定到textarea值

In version 0.5 it was easy:

在0.5版本中很简单:

<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:

在1.0版中,此绑定不起作用。只写一次作品而且很奇怪,只有一次。 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.

现在我使用set \ get文本,但它不是属性,只能从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?

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

1 个解决方案

#1

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

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

Example:

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

Here is a working example on plnkr

这是plnkr上的一个工作示例

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

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

More info is in the docs for two-way binding

更多信息在双向绑定的文档中

#1