rendering content tag many times by polymer

Question

I want to render multiple times content tag. But the content tag will not be any more when rendered once.

So I was trying to resolve duplicate the node, but I'm having problems do not appear well.

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>

Thanks you. The contents of the tag was able to display. But, it will fail when I try to pass the values in as core-list.

I tried to look at the source of core-list, but can not understand the way. posts-list is a polymer element that receives the data to option the data.

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

score 0 · Answer 1 · edited May 23 '17 at 12:07

"html-echo" can help. see 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>

rendering content tag many times by polymer

1 Answers1