通過聚合物多次渲染內容標簽

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>

謝謝。 標簽的內容能夠顯示。 但是，當我嘗試將值作為核心列表傳遞時，它將失敗。

我試圖看一看core-list的來源，但是無法理解方式。 posts-list是一個聚合物元素，它接收數據以選擇數據。

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

Answer 1

“ html-echo”可以幫助您。 請參閱如何以編程方式分發（插入）內容節點

  <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>