附加时，`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 存在，您需要在<dom-module> 的<template> 中有一个带有id="contentNode" 的元素，并且它不能在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

更新 看来您正在将 Polymer 与 Elm 集成，并期望看到节点更改的观察者回调使我的 Elm。您需要以某种方式将 Elm 的调用与 appendChild/removeChild 挂钩，以便它使用 Polymer 的 DOM API。