Polymer.js双向绑定到textarea值

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>

这是 plnkr上的一个工作示例

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

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