Question

sma-canvas 元素中定义的历史属性：

static get properties() {
    return {
        history: {
            type: Array,
            value: () => {
                return [];
            },
            notify: true
        }
    };
}

static get observers() {
    return [
        '_historyChanged(history.*)'
    ];
}

_historyChanged() {
    console.log("History Changed!");
    this._redrawCanvas(this.$.canvasEl, this.history);
}

我试图从另一个元素设置历史属性：

<dom-module id="sma-create-studio">
    <template>
        <sma-canvas id="shapesCanvasEdit" history={{shapesOnCanvasEdit}}></sma-canvas>
    </template>
<dom-module>

...

static get properties() {
    return {
        shapesOnCanvasEdit: {
            type: Array,
            value: () => {
                return [];
            },
            notify: true
        }
    };
}

_selectFrame(e) {
    // this.shapesOnCanvasEdit = e.detail.frame.shapes;

    // this.shapesOnCanvasEdit.splice(0, this.shapesOnCanvasEdit.length);
    // this.shapesOnCanvasEdit.push(e.detail.frame.shapes);

    this.set('shapesOnCanvasEdit', e.detail.frame.shapes);

    // this.splice('shapesOnCanvasEdit', 0, this.shapesOnCanvasEdit.length, e.detail.frame.shapes);

    // this.splice('shapesOnCanvasEdit', 0, this.shapesOnCanvasEdit.length);
    // this.push('shapesOnCanvasEdit', e.detail.frame.shapes);

    // this.notifyPath('shapesOnCanvasEdit');
    // this.notifySpice('shapesOnCanvasEdit');
}

每当我更改 shapesOnCanvasEdit 的值时，我都需要调用 _historyChanged （ sma-canvas 中的观察者）。正如您从上一个代码段中看到的那样，我尝试了多种方法来做到这一点，但都是徒劳的。

有人可以在这方面帮助我吗？我不知道，我做错了什么。

Answer 1

解决方案1 

static get properties() {
    return {
      active: {
        type: Boolean,
        // Observer method identified by name
        observer: '_activeChanged'
      }
    }
  }

  // Observer method defined as a class method
  _activeChanged(newValue, oldValue) {
    this.toggleClass('highlight', newValue);
  }

https://www.polymer-project.org/2.0/docs/devguide/observers#change-callbacks

根据我在1.93的经验，如果长度发生变化，为数组添加一个简单的观察者会更新数组。（在上例中将Boolean更改为Array。）

解决方案2

你可以观察接头：

static get observers() {
  return [
    'usersAddedOrRemoved(myArray.splices)'
  ]
https://www.polymer-project.org/2.0/docs/devguide/observers#array-observation }

只有在数组长度发生变化时才会触发。要强制更新，如果您绝望，请使用myArray重置数组this.set('myArray', [])。

解决方案3

真正绝望的解决方案。添加每次数组发生更改时更新的辅助int变量。因此_selectFrame()应首先更新数组history，然后更新整数，两者都应该是sma-canvas中的属性。在sma-canvas元素中设置该整数变量的观察者，如解决方案1所示。

如何在聚合物元素中的数组属性上设置观察者？

1 个答案: