如何在 Polymer 中将元素动态附加到 dom-if？

Question

我的目标是动态地将一个元素附加到现有 dom-if。问题是，在追加之后我可以在 DOM 三个中看到追加元素，但它从不对 condition 做出反应并且始终保持隐藏状态。

<template>
    <template id="domif" is="dom-if" if="[[condition]]" restamp></template>
</template>

ready() {
    var el = document.createElement("input");
    Polymer.dom(this.$.domif).appendChild(el);
    Polymer.dom.flush();
}

使用硬编码 dom-if 和 input 探索 DOM 表明 <input /> 元素实际上不是 dom-if 的子元素，而是紧挨着它。

<template>
    <template is="dom-if" if="[[condition]]" restamp>
       <input />
    </template>
</template>

这给了我一个线索，我可能应该将我的元素附加到 dom-if...但是现在最大的问题是如何告诉 dom-if 如果 condition满意。有什么想法吗？

Answer 1

如何在 dom-if 中添加一个跨度并将其附加到该跨度？

一些评论后更新：我们需要使用 this.async 才能找到该项目。使用就绪事件仅在条件最初为真时才有效。因此，您可以在 conditionChanged-observer 中附加元素 - 这是一个有效的示例：

<dom-module id='my-element1'>
  <template>
    <template is="dom-if" if="[[condition]]" restamp>
      <span id="appendHere"></span>
    </template>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'my-element1',
    properties: {
      condition: {
        type: Boolean,
        observer: "_conditionChanged"
      }
    },
    _conditionChanged: function(newVal) {
      if (newVal) {
        this.async(function() {
          var el = document.createElement("input");
          Polymer.dom(this.$$("#appendHere")).appendChild(el);
          Polymer.dom.flush();
        });
      }
    }
  });
</script>

在这里试试：http://plnkr.co/edit/1IIeM3gSjHIIZ5xpZKa1?p=preview .

在这种情况下使用 dom-if 的副作用是，在将条件设置为 false 后，元素完全消失并在下一次条件更改时再次添加。因此，在将条件设置为 false 之前的所有更改都会丢失。您可以通过在条件更改时将添加的元素隐藏在某个地方并稍后将其取回来解决它，但我认为这不是一个好主意，如果以下是替代方案：

Polymer 团队建议使用 dom - 如果没有其他方法，比如隐藏元素。所以，如果可能的话，你也可以做这样的事情（条件必须为真才能隐藏元素）：

<dom-module id='my-element1'>
  <template>
    <span id="appendHere" hidden$="[[condition]]"></span>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'my-element1',
    properties: {
      condition: Boolean
    },
    ready: function() {
        var el = document.createElement("input");
        Polymer.dom(this.$.appendHere).appendChild(el);
        Polymer.dom.flush();
    }
  });
</script>

在这里试试： http://plnkr.co/edit/mCtwqmqtCPaLOUveOqWS?p=preview

Answer 2

模板元素本身不会添加到 DOM，这就是您无法使用 querySelector 或 getElementXxx

访问它的原因

如何在 Polymer 中将元素动态附加到 dom-if？

how to dynamically append an element to dom-if in Polymer?

polymer

polymer-1.0