聚合物。动态添加或删除观察者的方法答案

【问题标题】：Polymer. Way to dynamically add or remove observer聚合物。动态添加或删除观察者的方法
【发布时间】：2023-03-24 01:01:01
【问题描述】：

有没有办法在元素初始化的时候添加或删除观察者？我可以这样定义观察者：

observers: ['dataChanged(data.*)']

我可以稍后删除这个观察者，还是我可以用不同的方式设置这个观察者？

【问题讨论】：

标签： polymer

【解决方案1】：

您可以通过以下方式轻松地动态添加观察者：

this._addObserverEffect("property", observerFunction);

或

this._addComplexObserverEffect("dataChanged(data.*)");

移除更难，Polymer 不提供执行此操作的功能。虽然您可以在 _propertyEffects 数组中搜索它，但我不推荐它。也许只需检查您的观察者函数是否仍应处于活动状态，否则返回。

【讨论】：

【解决方案2】：

你也许可以试试这个方法：使用 notify: true 在元素中配置您的 data 属性，这样您就可以使用纯 js 为更改添加监听器

var element=document.querySelector("#YOUR-ELE-ID");
element.addEventListener("data-changed", function(e) {
 //triggered when data property changes
});

https://www.polymer-project.org/1.0/docs/devguide/properties#notify

要删除绑定的侦听器，您可以调用removeEventListener

https://developer.mozilla.org/de/docs/Web/API/EventTarget/removeEventListener

示例 1 - 纯 JS：

document.addEventListener('WebComponentsReady', function(e) {
    var element=document.querySelector("#YOUR-ELE-ID");
    element.addEventListener("data-changed", function(e) {
     //triggered when data property changes
    });
});

示例 2 - 在自定义元素中：

//...element definition...
ready: function() {
    var element=document.querySelector("#YOUR-ELE-ID");
    element.addEventListener("data-changed", function(e) {
     //triggered when data property changes
    });
}

【讨论】：