如何在Polymer中将元素动态附加到dom-if? [英] how to dynamically append an element to dom-if in Polymer?

问题描述

我的目标是动态地将元素添加到现有的dom-if中.问题是，追加后，我可以在DOM 3中看到追加的元素，但是它对condition毫无反应，并且始终隐藏.

My goal is to append an element to existing dom-if dynamically. Problem is that after appending I can see appended element in the DOM three but it never reacts on condition and stays always hidden.

<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的子元素，但位于它的旁边.

Exploring DOM with hardcoded dom-if and input shows that <input /> element is actually not a child of dom-if but lives next to it..

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

这给了我一个线索，我可能应该在dom-if旁边附加我的元素...但是现在最大的问题是如何对dom-if说，如果满足condition则应该呈现附加的元素.有什么想法吗?

That gave me a clue that I probably should append my element next to dom-if... But now the biggest question is how to say to dom-if that appended element should be rendered if condition is satisfied. Any ideas?

推荐答案

如何在dom-if中添加跨度并将其附加到该跨度上?

How about adding a span in your dom-if and appending it to that span?

评论后更新:我们需要使用this.async来找到该项目.仅当条件最初为true时，才使用准备事件.因此，您可以将元素追加到conditionChanged-observer中-这是一个有效的示例:

Update after some comments : We need to use this.async for the item to be found. Using the ready-event only works when the condition is true initially. So you could append the element in a conditionChanged-observer - this is a working example :

<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之前的所有更改都会丢失.您可以通过在条件变化时将添加的元素隐藏在某处并稍后再将其放回来解决该问题，但是如果以下方法可以替代，我认为这不是一个好主意:

A side-effect of using dom-if in this case is that after setting the condition to false, the element disappears completely and gets added on the next condition-change again. So every change before setting the condition to false gets lost. You could work around it by putting the added element somewhere hidden when the condition changes and getting it back later, but I don't think this is a good idea, if the following is an alternative :

Polymer-team建议仅在没有其他方法(例如隐藏元素)的情况下使用dom-.因此，如果可能的话，您也可以这样做(条件必须为true才能隐藏元素):

The Polymer-team recommends using dom-if only if there is no other way, like hiding the element. So, if it is possible you also could do something like this (condition has to be true to hide the element) :

<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

这篇关于如何在Polymer中将元素动态附加到dom-if?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！