polymer slotted content and data binding - 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?

Answer 1

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.