聚合物 2.0 双向绑定

Question

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

class 的代码如下。

<!-- 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 出现在 <input> 下方，正如您键入一样。您需要在 <input> 的 input 事件中使用 two-way native binding：

<input type="text" value="{{greeting::input}}">

codepen

聚合物 2.0 双向绑定

polymer 2.0 two way binding

polymer

polymer-2.x