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说明如果{{1}应该渲染附加元素很满意。有什么想法吗？

Answer 1

如何在你的dom-if中添加一个span并将其附加到该span？

一些评论后更新：我们需要使用this.async来找到项目。使用ready-event仅在条件为true时才有效。所以你可以在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-team建议使用dom-if，如果没有其他方法，比如隐藏元素。所以，如果有可能你也可以做这样的事情（条件必须是真的来隐藏元素）：

<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

访问它的原因

如何在聚合物中动态地将元素附加到dom-if？

2 个答案: