polymer slotted content and data binding

Question

Today, I'd like to create an element that generated a list of "cards". On these cards there could be very different things according to which page it gets included. For instance, sometimes these cards contain a picture, sometimes there could be contact information (name, age, adress, phone...), sometimes it could contain only a video, etc...

So what my idea was to design a polymer element that handle the CSS, the ajax call to the datasource, the dom-repeat, and a <slot> (formerly known as <content>) which would include in this element the html template used to create the card content (picture, video, or contact card)

this is what I did so far:

Parent element:

<tiles-list id="tilesView" datas="[[datas]]">
  <img src="https//lorempixel.com/200/130/people" />
  <p>[[item.name]]</p>
  <p>[[item.age]]</p>
  <p>[[item.adress]]</p>
  <p>[[item.phone]]</p>
</tiles-list>

{{datas}}is replaced by the URL for the ajax call

and in the child element:

<iron-ajax
  auto
  url="[[datas]]"
  handle-as="json"
  last-response="{{ajax}}"
  on-response="log"></iron-ajax>

<div id="grid">
  <template is="dom-repeat" items="[[ajax.data]]">
    <div class="card gridCell">
      <slot></slot>
    </div>
  </template>
</div>

But yeah, it doesn't work. All I get is a list with the right amount of cards, but only the first one contains a picture, but no data. So I guess the slot doesn't work like I'm trying to make it work, and the data binding cannot work this way either.

Anybody has a solution?

You are right. As far as i know you cannot keep slot/content in a dom-repeat and then have multiple copies of it. One solution will be to move dom-repeat itself to light-dom — a1626
well, putting the dom repeat in light dom is precisely what i'm trying to avoid. If I do so, I cannot create this wonderful generic element that will turn any html code into cards — SKMTH

Pascal L. Pascal L. · Accepted Answer · 2017-05-16T14:09:23

I think what you want to achive is a perfect case for the Templatizer. Change your code to:

<tiles-list id="tilesView" datas="[[datas]]">
     <template tile>
        <img src="https//lorempixel.com/200/130/people" />
        <p>[[item.name]]</p>
        <p>[[item.age]]</p>
        <p>[[item.adress]]</p>
        <p>[[item.phone]]</p>
    </template>
</tiles-list>

And then when your ajax request resolves do something like this:

var template = Polymer.dom(this).querySelector('template[tile]');
this.templatize(template);
ajax.data.forEach(function(item){
    var instance = this.stamp(item);
    Polymer.dom(this.$.grid).appendChild(instance.root);
});

This will create several instances of you template, no dom-repeat needed.

polymer slotted content and data binding

1 Answers