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。

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

知道我做错了什么吗？

感谢您的帮助。

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

聚合物3数据绑定未在属性集上更新

1 个答案: