ポリマースロット入りコンテンツとデータバインディング

Question

今日、私は "カード"のリストを生成する要素を作りたいと思います。これらのカードには、それが含まれるページに応じて非常に異なるものがあります。たとえば、これらのカードに画像が含まれていることがあります。時には連絡先情報（名前、年齢、住所、電話など）がある場合もあります。 CSSを処理するポリマー要素、データソースへのajax呼び出し、dom-repeat、およびこの要素にカードコンテンツを作成するために使用されるhtmlテンプレート（picture、video）を含む<slot>（以前は<content>として知られています） 、または連絡先カード）

これは私がこれまでにやったことです：

親要素：

<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}}は、AJAX呼び出し

と子要素内のURLに置き換えます。

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

しかし、ええ、それは動作しません。私が得るのは、適切な量のカードが入ったリストですが、最初のカードには画像しか含まれていませんが、データはありません。だから私はそれが動作するようにしようとしているように、スロットが動作しないと思うし、データバインディングはこの方法でも動作しません。

誰かが解決策を持っていますか？

Answer 1

Templatizerは完璧なケースだと思います。あなたのAJAXリクエストはこのような何かを解決するときに

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

そして：にあなたのコードを変更し

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); 
}); 

をこれには、DOMリピートは必要ありません、テンプレート名の複数のインスタンスを作成します。