Question

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

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

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

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

Answer 1

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

示例：

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

这是 a working example on plnkr

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

更多信息在two-way binding

的文档中

Polymer.js双向绑定到textarea值

1 个答案: