在附件中，`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" 的元素，并且它不能在 [= 中19=] 或 dom-repeat 模板：

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

动态创建的节点（即 dom-if 或 dom-repeat 内的节点）必须使用 this.$$()（例如 this.$$('#contentNode')）进行查询。如果您尝试在 attached 回调中设置它们，您需要等到在标记节点之后，这可以通过 [=26= 观察到].

<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 看来您正在将 Polymer 与 Elm 集成，并且期望看到节点更改的观察者回调使我成为了 Elm。您需要以某种方式挂钩 Elm 对 appendChild/removeChild 的调用，以便它使用 Polymer 的 DOM API.

在附件中，`this.$` 是一个空对象

On attached, `this.$` an empty object

polymer

polymer-1.0

web-component

custom-element