Question

我正在尝试使用Polymer 2.0并拥有一个简单的类。它有一个输入文本框，在更改其内容时不响应。反映文本框的更改以反映为双向绑定需要什么？

该课程的代码如下。

<!-- Styles MUST be inside template -->
<style>
</style>

<div>
  <input type="text" id="greeting" name="greeting" value="{{greeting}}"/>
  <slot></slot>
  {{greeting}}
</div>

// Extend Polymer.Element base class
class Polymer2Class extends Polymer.Element {
  static get is() { return 'polymer-2-class' }
  static get config() {
    return {
      properties: {
        greeting: {
          type: String,
          value: "Hello",
          notify: true
          //observer: 'greetingChanged'
        }
      },
      observers: [
        'greetingChanged(greeting)'
       ]
    }
  }
  constructor() {
    super();
    console.log('created');
  }
  connectedCallback() {
    super.connectedCallback();
    console.log('attached');
  }
  ready() {
    this.addEventListener('click', (e)=>this.handleClick(e));
    this._ensureAttribute('tabIndex', 0);
    super.ready();
    console.log('ready');
  }
  greetingChanged(greeting) {
    if(greeting === undefined) {
      console.log("greetingChanged: undefined");
    } else {
      console.log("greetingChanged: " + greeting);
    }
  }
  handleClick(e) {
    console.log("hamdleClick: " + e.type);
  }

// Register custom element definition using standard platform API
customElements.define(Polymer2Class.is, Polymer2Class);

Answer 1

我认为您希望greeting在您输入时<{1}}完全下方显示。您需要在<input> <input>事件中使用two-way native binding：

input

codepen

聚合物2.0双向结合

1 个答案: