Polymer 1.0 与 textarea 的双向绑定

Question

我有这个与 textarea 的简单双向数据绑定：

<dom-module id="my-element">
  <style>
  </style>

  <template>
    <button on-click="click">Click me!</button>
    <textarea>{{element}}</textarea>
  </template>
</dom-module>

<script>
  Polymer({
    is: "my-element",

    properties: {
      element: {
        type: String,
        value: "Default value",
        notify: true
      }
    },

    click: function() {
      console.log(this.element);
    }
  });
</script>

文本区域显示为“默认值”。当我更改此值然后单击按钮时，控制台仍会注销 Default value 而不是我刚刚输入的文本。我在这里做错了什么？

Answer 1

您应该使用<iron-autogrow-textarea> 来允许数据绑定。

<dom-module id="my-element">
  <style>
  </style>

  <template>
    <button on-click="click">Click me!</button>
    <iron-autogrow-textarea bind-value="{{element}}"></iron-autogrow-textarea>
  </template>
</dom-module>

<script>
  Polymer({
    is: "my-element",

    properties: {
      element: {
        type: String,
        value: "Default value",
      }
    },

    click: function() {
      console.log(this.element);
    }
  });
</script>
</dom-module>

文档是here。