javascript - Polymer.js 双向绑定(bind)到 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 版中，此绑定(bind)不起作用。只写作品而且很奇怪，只写一次。 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 的值属性是不可观察的，所以你应该使用这个元素的绑定(bind)值来代替命令更新。 但为什么在 0.5 版本中 textarea 的值是可见的？

Answer 1

要绑定(bind)到 Polymer 1.0 中的输入值，请在要绑定(bind)到的变量后添加::input。

例子:

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

这是 a working example on plnkr

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

更多信息在 two-way binding 的文档中