Полимер Наблюдать Узлы не работает
Я пытаюсь простой тест о 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 и span#removed содержит 0), но когда я программно добавляю / удаляю элементы на легком DOM, механизм наблюдения не реагирует (spanне меняются). Это мой тест:
<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
В чем моя ошибка? Заранее спасибо.
1 ответ
Вам нужно использовать Polymer.dom(this).appendChild вместо this.appendChild чтобы заставить его работать с Polymer 1.0 в соответствии с этим: