Polymer 1.0 : Get more than only one attribute from iron-selector (with template-repeat) calling data from an iron-ajax

Question

Polymer 1.0 : Get more than only one attribute from iron-selector (with template-repeat) calling data from an iron-ajax

629 Views Asked by Thiago Guimarães At 21 October 2024 at 03:49

With this code I can print the {{item.name}} of the selected item in the "Main Content" area (that is out of the tag template is="dom-repeat") using the variable {{selected}} and attr-for-selected="name". But I would like to print more details from the selected item than only one attribute, that in this case is the name.

          <!-- Main Contetnt -->
          <div class="content">
          <h1>{{selected}}</h1>   *This one works fine*

          <h1>{{item.city}}</h1>   *But these two don't*
          <h1>{{item.date}}</h1>
          </div>

I would like to print city and date as well as name printed by

Anyone has a clue for this question? PS: My element is calling himself at the bottom of the code and it is working by now. But could I have any future problems because of that?

  <dom-module id="x-app">
      <template id="app">

    <iron-ajax url="data/contacts.json" last-response="{{data}}" auto></iron-ajax>

    <paper-drawer-panel id="navDrawerPanel" responsive-width="1280px">

      <div class="nav" drawer>
        <!-- Nav Content -->
      </div>

      <paper-drawer-panel id="mainDrawerPanel" class="main-drawer-panel" main responsive-width="600px"
          drawer-width="[[_computeListWidth(_isMobile)]]" drawer-toggle-attribute="list-toggle"
          narrow="{{_isMobile}}">

        <paper-header-panel class="list-panel" drawer>

          <!-- List Toolbar -->
          <paper-toolbar>
            <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
          </paper-toolbar>

          <iron-selector selected="{{selected}}" attr-for-selected="name" id="selector">

            <template is="dom-repeat" class="list" items="{{data}}" as="item" id="tmpl">

          <div name="{{item.name}}" on-click="_listTap">
            <div class="item">
              <img class="avatar" src="{{item.image}}">
              <div class="pad">
                <div class="primary">
                  <span>{{index}}</span>
                  <span>{{item.name}}</span>
                </div>
                <div class="secondary">{{item.date}}</div>
                <div class="secondary dim">{{item.city}}</div>
              </div>
              <!-- <iron-icon icon$="{{iconForItem(item)}}"></iron-icon> -->
            </div>
            <div class="border"></div>
          </div>

        </template>

        </iron-selector>


        </paper-header-panel>

        <paper-header-panel class="content-panel" main>

          <!-- Main Toolbar -->
          <paper-toolbar>
            <paper-icon-button icon="arrow-back" list-toggle></paper-icon-button>
          </paper-toolbar>

            <!-- Main Contetnt -->
          <div class="content">
          <h1>{{selected}}</h1> 
          <h1>{{item.city}}</h1>
          <h1>{{item.date}}</h1>
          </div>


        </paper-header-panel>

      </paper-drawer-panel>

    </paper-drawer-panel>

  </template>

  <script>

    Polymer({

      is: 'x-app',
          properties: {

          },
        ready: function() {
         var drawerPanel = document.querySelector('#mainDrawerPanel');
         drawerPanel.openDrawer();

          },

      _computeListWidth: function(isMobile) {
        // when in mobile screen size, make the list be 100% width to cover the whole screen
        return isMobile ? '100%' : '33%';
      },

      _listTap: function() {
        var drawerPanel = document.querySelector('#mainDrawerPanel');
         drawerPanel.closeDrawer();
     }

    });

  </script> 


</dom-module>

<body>
    <x-app></x-app>
</body>

Original Q&A

There are 1 best solutions below

**Ricky** · Answer 1

Use selected-item instead of selected.

selectedItem returns the currently selected item (see IronSelectableBehavior)

So your iron-selector should look like:

<iron-selector selected-item="{{selectedItem}}" attr-for-selected="name" id="selector">

Then add two conditional attributes to your div like so:

<div name="{{item.name}}" city$="[[item.city]]" date$="[[item.date]]" on-click="_listTap">

Then setup an observer to monitor changes to selectedItem:

...

observers: [ '_selectedItemChanged(selectedItem)' ],

_selectedItemChanged: function(el) {
  this.city = el.getAttribute('city');
  this.date = el.getAttribute('date');
},

...

And then you can use the following:

<div class="content">
  <h1>{{city}}</h1>
  <h1>{{date}}</h1>
</div>

Polymer 1.0 : Get more than only one attribute from iron-selector (with template-repeat) calling data from an iron-ajax

{{selected}}

There are 1 best solutions below

Related Questions in AJAX

Related Questions in SELECTOR

Related Questions in REPEAT

Related Questions in POLYMER-1.0

Related Questions in IRON

Trending Questions

Popular # Hahtags

Popular Questions