1

我正在试验 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);

4

1 回答 1

1

我假设您希望在键入时完全greeting显示在下方。您需要在'事件上使用双向本机绑定：<input><input>input

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

密码笔

于 2016-11-02T20:37:43.677 回答