CODEWITHSUNDEEP
templatespolymercustom-element
user568109
user568109

Reputation: 48013

How to nest polymer templates properly?

I recently started learning polymer and am trying to use iron-ajax iron-list and templates together. For some reason the values are showing blank on screen, but cards are getting created. Taking example from this question, I created two polymer-elements search-list and search card. Search card for showing data and search list for fetching data and populating a list with card. Search list is following:

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

Search-card is the 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>

All the span fields consisting of item data are showing blank. What am I doing wrong ? How to fix it ?

Upvotes: 0

Views: 189

Answers (1)

urandom
urandom

Reputation: 1157

For a start, you have to put the contents of the iron-list element within a template.

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

Upvotes: 0

Related Questions