Question

我想多次呈现内容标记。但是，渲染一次时，内容标记将不再存在。

所以我试图解决复制节点的问题，但是我遇到了问题，但是看起来不太好。

的x list.html

<polymer-element name="x-list">
  <template>
    <content id="content" hidden=""></content>
    <template repeat="{{d in data}}">
      <div>
        {{d.body}}
        {{content}}
      </div>
    </template>
  </template>
  <script>
    Polymer('x-list',{
      ready: function() {
        this.content = this.$.content.cloneNode();
      },
      publish: {
        data: {
          reflect: true
        }
      }
    });
  </script>
</polymer-element>

的index.html

<x-list data="{{data}}">
  <div>hello world</div>
</x-list>

谢谢你。标签的内容能够显示。但是，当我尝试将值作为核心列表传递时，它将失败。

我试着查看核心列表的来源，但无法理解方式。 posts-list是一个聚合物元素，它接收数据以选择数据。

<x-list data="{{posts}}">
  <posts-list data="{{d}}"></posts-list>
</x-list>

Answer 1

“html-echo”可以提供帮助。见How to distribute (insert) content nodes programmatically

  <polymer-element name="html-echo" attributes="html">
    <script>
      Polymer('html-echo', {
        htmlChanged: function() {
          // WARNING: potential XSS vulnerability if `html` comes from an untrusted source
          this.innerHTML = this.html;
        }
      });
    </script>
  </polymer-element>

    <polymer-element name="x-list">
  <template>
    <content id="content" hidden=""></content>
    <template repeat="{{d in data}}">
      <div>
        {{d.body}}
        <template repeat="{{c in content}}">
        <html-echo html="{{c.outerHTML}}"></html-echo>
          </template>
      </div>
    </template>
  </template>
  <script>
    Polymer('x-list',{
      ready: function() {
        this.content = this.children.array();
      },
      publish: {
        data: {
          reflect: true
        }
      }
    });
  </script>
</polymer-element>

通过聚合物多次渲染内容标签

1 个答案: