Question

我最近开始学习聚合物，我正在尝试使用铁-ajax铁列表和模板。由于某种原因，屏幕上的值显示为空白，但正在创建卡片。以这个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>

搜索卡是以下内容：

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

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

1 个答案: