На прикрепленном, `this. $` Пустом объекте

Question

Я стараюсь наблюдать добавленные и удаленные dom-узлы в свой пользовательский элемент Polymer без успеха. Я заметил, что this.$ - пустой объект.

Polymer({ 
    is: 'dramatic-view', 
    attached: function() { 
     this._observer = Polymer.dom(this.$.contentNode).observeNodes(function (info) { 
     console.log('kromid info', info); 
     }); 
    } 
    }); 

обратного вызова вызывается только один раз (даже то я изменить содержание впоследствии) со следующими странными параметрами:

Я следовал документацию here.

Answer 1

this.$ - хэш элементов в шаблоне, который имеет атрибут id (см. Automatic node finding).

Так, this.$.contentNode существовать, вам нужен элемент с id="contentNode" в ваших <dom-module> «s <template>, и она не должна быть внутри dom-if или dom-repeat шаблона:

<dom-module id="x-foo"> 
    <template> 
    <content id="contentNode"></content> 
    </template> 
</dom-module> 

узлов, созданных динамически (то есть те, внутри dom-if или dom-repeat) необходимо запросить this.$$() (например, this.$$('#contentNode')). Если вы пытаетесь установить их в обратном вызове attached, вам нужно будет подождать до после, если эти узлы отмечены штампом, что можно наблюдать с помощью Polymer.RenderStatus.afterNextRender().

<dom-module id="x-foo"> 
    <template> 
    <template is="dom-if" if="[[useDynamicContent]]"> 
     <content id="contentNode"></content> <!-- unavailable to this.$ --> 
    </template> 
    </template> 
    <script> 
    Polymer({ 
     is: 'x-foo', 
     attached: function() { 
     Polymer.RenderStatus.afterNextRender(this, function() { 
      var contentNode = this.$$('#contentNode'); 
      if (contentNode) { 
      contentNode.observeNodes(...); 
      } 
     }); 
     } 
    }); 
    </script> 
</dom-module> 

Для запуска наблюдателя узла, используйте Polymer's DOM API так:

Polymer.dom(this).appendChild(node); 
Polymer.dom(this).removeChild(node); 

codepen

UPDATE кажется вы интегрируя полимер с Elm, и ожидая увидеть обратный вызов наблюдателя для изменений узла сделал мой Вяз. Вам нужно будет перехватить звонки Элма до appendChild/removeChild так или иначе, чтобы он использовал API DOM от Polymer.