templates - 如何正确嵌套聚合物模板？

Question

我最近开始学习聚合物，并尝试同时使用 iron-ajax iron-list 和模板。由于某种原因，这些值在屏幕上显示为空白，但正在创建卡片。以这个问题为例，我创建了两个聚合物元素搜索列表和搜索卡。用于显示数据的搜索卡和用于获取数据并使用卡填充列表的搜索列表。搜索列表如下：

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

所有由项目数据组成的跨度字段都显示为空白。我究竟做错了什么 ？如何解决？

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>