聚合物1：父組件未從子組件的「分離」方法中偵聽火災事件？

Question

我有一個爲父級和幾個childComponents像這樣：

<parent-component> 
    <child-component> child_1 </child-component> 
    <child-component> child_2 </child-component> 
</parent-component> 

爲父級：

Polymer({ 
    is: 'parent-component', 
    listeners: { 
     'EVT_CHILD_ATTACHED': 'onChildAttached' 
     'EVT_CHILD_DETACHED': 'onChildDetached' 
    }, 
    onChildAttached: function() { 
     console.log('child elem is ATTACHED'); 
    }, 
    onChildDetached: function() { 
     console.log('child elem is DETACHED'); 
    } 
}) 

ChildComponent：

Polymer({ 
    is: 'child-component', 
    attached: function() { 
     this.fire('EVT_CHILD_ATTACHED'); 
    }, 
    detached: function() { 
     this.fire('EVT_CHILD_DETACHED'); 
    } 
}); 

成功：添加「新」兒組件添加到父組件中，組件的聚合物生命週期「附加」方法被調用並且事件'EVT_CHILD_ATTACHED'被觸發，並且最終父組件能夠成功地偵聽並記錄'兒童元素被附着'。

失敗：當「現有」兒童組件被刪除，我可以看到，「分離」的方法子成分的聚合物生命週期被稱爲與事件「EVT_CHILD_DETACHED」被觸發爲好。但是父組件的onChildDetached（）永遠不會被觸發，也不會顯示日誌。

QN：我要如何父組件反應/聽，當任何的子組件是「分離」？

注意：子組件可以動態添加或者在循環條件或dom-if條件下進行包裝，爲簡單起見，我已經刪除了這些邏輯。

Answer 1

detached事件無法按照您期望的方式工作。

從documentation：

分離

稱爲元素從文檔分離之後。在元素的生命週期中可以多次調用 。用途包括 刪除在attached中添加的事件偵聽器。

使用，而不是detachedCallback。

你detached回調被稱爲後的元素從DOM樹，這意味着該事件無法傳播到它的父，因爲它沒有一個上拆除。

您將需要創建一個不涉及觸發detached回調內部事件的不同機制。

例如，可以保持child內的parent元素（你能獲得attached回調內），然後手動調用parent小號detached事件處理程序的所述child內部onChildDetached方法「的參考。

Answer 2

解決方案：只要子組件的附加方法觸發'EVT_CHILD_ATTACHED'並在父組件中觸發事件偵聽器，ParentComponent就會將分離的方法添加到所有childComponent中。

Polymer({ 
    is: 'parent-component', 
    listeners: { 
     'EVT_CHILD_ATTACHED': 'onChildAttached' 
    }, 
    onChildAttached: function (evt) { 
     console.log('child elem is ATTACHED'); 
     var self = this; 
     evt.target.detached = function() { 
      self.onChildDetached(this); 
     } 
    }, 
    onChildDetached: function (target) { 
     console.log('child elem is DETACHED', target); 
    } 
}) 

可能不是最好的方法，但仍然做的工作，雖然。