templates - ポリマー テンプレートを適切にネストするには?

Question

私は最近ポリマーの学習を開始し、iron-ajax iron-list とテンプレートを一緒に使用しようとしています。何らかの理由で値が画面に空白で表示されますが、カードが作成されています。この質問から例を挙げて、2 つのポリマー要素の検索リストと検索カードを作成しました。カードを検索してデータを表示し、リストを検索してデータを取得し、リストにカードを入力します。検索リストは次のとおりです。

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

検索カードは次のとおりです。

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

項目データを構成するすべてのスパン フィールドが空白で表示されます。私は何を間違っていますか？それを修正する方法?