Как правильно вложить полимерные шаблоны?

Question

Недавно я начал изучать полимер и стараюсь использовать железо-аякс железный список и шаблоны вместе. По какой-то причине значения отображаются на экране пустым, но карточки создаются. Взяв пример из этого question, я создал два списка поиска и список поиска полимерных элементов. Карта поиска для отображения данных и списка поиска для получения данных и заполнения списка карточкой. Список Поиска следующий:

<link rel="import" href="../search-card/search-card.html"> 
<dom-module id="search-list"> 
    <template> 
    <div> 
     <iron-ajax id="ajax" auto url="/data.json" handle-as="json" last-response="{{data}}"></iron-ajax> 
     <iron-list items="[[data]]" as="item"> 
     <div class="flex"> 
      <template is="dom-repeat" items="{{data}}"> 
      <search-card></search-card> 
      <span>Hi</span> 
      <span>[[item.profile]]</span> 
      </template> 
     </div> 
     </iron-list> 
    </div> 
    </template> 
    <script> 
    (function() { 
     Polymer({ 
     is: 'search-list', 
     properties: { 
      items: { 
      type: Array, 
      notify: true, 
      } 
     }, 
     ready: function() { 
      this.items = []; 
     } 
     }); 
    })(); 
    </script> 
</dom-module> 

Поиск-карта является follwing:

<dom-module id="search-card"> 
    <style> 
    </style> 
    <template> 
     <paper-material style="margin:15px;"> 
       <a href="[[item.profile]]"> 
       <img width="100" height="100" src="[[item.pic]]"> 
       </a> 
       <div class=""> 
       <div>Name: <span>[[item.name]]</span></div> 
       <div>Location: <span>[[item.location]]</span></div> 
       <div>Email: <span>[[item.email]]</span></div> 
      </div> 
     </paper-material> 
    </template> 
    <script> 
    (function() { 
     Polymer({ 
     is: 'search-card', 
     properties: { 
      item: { 
      type: Object, 
      notify: true, 
      } 
     }, 
     ready: function() { 
      this.item = {} 
     } 
     }); 
    })(); 
    </script> 
</dom-module> 

Всех пяди поле, состоящее из элементов данных показывает пустым. Что я делаю не так ? Как это исправить?

Answer 1

Для начала вы должны поместить содержимое элемента iron-list в шаблон.

<iron-list items="[[data]]" as="item"> 
    <template> 
     <div class="flex"> 
     <template is="dom-repeat" items="{{data}}"> 
      <search-card></search-card> 
      <span>Hi</span> 
      <span>[[item.profile]]</span> 
     </template> 
     </div> 
    </template> 
    </iron-list>