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

Question

我有一个Polymer 3模块（simplified/wrong下面仅作说明）；

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);

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

Polymer 3 Data Binding not updating on property set

polymer-3.x

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

Polymer 3 Data Binding not updating on property set

polymer-3.x

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