Polymer 3 数据绑定未在属性集上更新

Question

我有一个 Polymer 3 模块（以下简化/错误仅用于解释）；

import {html,PolymerElement} from '@polymer/polymer/polymer-element.js';
class myInput extends PolymerElement {

    static get template() {
        return html `
            <input id="inputBox" value='{{bar::input}}'/><br/>
            <a>You have typed [[bar]]!</a>
        `;
    }

    static get properties() {
        return {
            bar: {
            observer: '_dataChanged',
        },
    }

    _dataChanged () {
        this.bar = "BAR HAS CHANGED!!"
    }
}

[[bar]] 已成功更新并显示在页面上。

{{bar::input}} 成功触发_dataChanged。

但是当_dataChanged() 被触发时，[[bar]] 不会更新并在页面上显示"BAR HAS CHANGED!!"。

知道我做错了什么吗？

感谢您的帮助。

Answer 1

使用其中一种聚合物按钮元素。然后您可以轻松地将值绑定到bar 属性。这里是例子：

DEMO

import { PolymerElement, html } from '@polymer/polymer';
import '@polymer/paper-button/paper-button.js'

class MyElement extends PolymerElement {
    static get properties() {
        return {
            bar: {
            observer: '_dataChanged',
        }
    }}

  static get template() {
    return html`
            <input id="inputBox" value='{{bar::input}}'/><br/>
            <paper-button on-tap="_clickMe">You have typed [[bar]]!</paper-button>
        `;
  }

    _dataChanged(d){console.log(d)}
    _clickMe () {
        this.bar = "CLICKED!!"
    }

}
customElements.define('my-element', MyElement);