聚合物觀察節點不起作用

Question

我試圖做一個關於observeNodes聚合物設施的簡單測試。本質上，我的代碼定義了組件上的子節點更改的觀察者。

<dom-module id="wc-A"> 
    <template> 
     <div>Added Nodes : <span id="added"></span></div> 
     <div>Removed Nodes : <span id="removed"></span></div> 
    </template> 
    <script> 
     Polymer ({ 
     is: 'wc-A', 
     ready: function() { 
      Polymer 
       .dom (this) 
       .observeNodes (function (nodes) { 
        console.log (nodes) 
        this.$.added.textContent = nodes.addedNodes.length; 
        this.$.removed.textContent = nodes.removedNodes.length; 
       }); 
     }  
     }); 
    </script> 
</dom-module> 

這個例子上正常工作創建時間（從我的測試span#added含5-8 span#removed包含0），但是當我以編程方式添加/刪除上的光span的元素DOM，觀察機制不響應（不要換）。這是我的測試：

<div> 
    <button id="btnAdd">New</button> 
    <button id="btnRemove">Remove</button> 
</div> 

<wc-A> <!-- (1) Fires observer --> 
    <div class="data">1</div> 
    <div class="data">2</div> 
</wc-A> 

<template id=template> 
    <div class="data">3</div> 
</template> 

<script> 
    HTMLImports.whenReady (function() { 
     document 
      .querySelector ('#btnAdd') 
      .addEventListener ('click', function (e) { 
       var template = document.querySelector ('#template').content; 
       var div = template.querySelector ('div'); 
       var wcA = document.querySelector ('wc-A') 
       wcA.appendChild (div.cloneNode (true)); // (2) Does not fire observer 
      }); 

     document 
      .querySelector ('#btnRemove') 
      .addEventListener ('click', function (e) { 
      var wcA = document.querySelector ('wc-A') 
      var child = wcA.querySelector ('.data'); 
      if (child) 
      wcA.removeChild (// (3) Does not fire observer 
       child 
      ); 
      }); 
    }); 
</script> 

完整的代碼可以檢查http://plnkr.co/edit/DHiH40T3pBLx9Nu6Tv3W?p=preview

什麼是我的錯誤？提前致謝。

Answer 1

您需要使用Polymer.dom(this).appendChild而不是this.appendChild，使之根據這個與聚合物1.0工作：

https://github.com/Polymer/polymer/issues/3102