CODEWITHSUNDEEP
javascriptpolymerdhtml
Paul Armstrong
Paul Armstrong

Reputation: 115

using polymer iron-selector events

Here is the (abridged) code I am using with iron-selector 

...
<iron-selector id="listSelection" attr-for-selected="name" on-tap="_itemSelected">
    <template is="dom-repeat" items="{{boilerplateSets}}">
      <div class="item" name='{{item.name}}'>
        <paper-icon-item >
          <paper-item-body two-line>
            <div>{{item.name}}</div>
            <div secondary>{{item.description}}</div>
          </paper-item-body>
          <iron-icon class="big-icon" icon="hardware:keyboard-arrow-right"></iron-icon>
        </paper-icon-item>
        <paper-ripple></paper-ripple>
      </div>
    </template>
...

Followed by this script (also abridged) 

<script>
Polymer
(
    {
        is: 'boilerplate-list',
        ready: function()
        {
        this.boilerplateSets = [{name: 'CVs', description: 'Bolierplates'},
                               {name: 'Addresses', description:                                    
                               'Boilerplates'},];
        },
        behaviors: 
        [
            Polymer.NeonAnimatableBehavior
        ],
        _itemSelected: function(e,detail)
         {
                 console.log("selected e:" + e.name);
                 console.log("selected detail:" + detail.name);

                 var _selected = this.$.listSelection.selectedItem;
                 console.log('selected item:' + _selected);
                 this.fire('select',{item: _selected});
        },
      ...
    }
);
</script>

I am struggling on two fronts:

  1. what configuration including which attribute/property do I use to access the value of the selected item? In this example I have tried to configure it to use the "name" value. This does not work in this example. I have had it working, but can not recall how; permutations might include "item.name" or "{{name}}" or "{{item.name}}".

  2. I am have is a race condition. The on-tap event fires and calls _ItemSlected. But when I read the values in this function they are not updated. The second time I tap and get the event to fire the values are now set, but to accurate to the last selection.

I'd really value a decent example of iron-selector being used with binding (ie with {}) and with events firing including the use of the arr-for-selected and on-tap event.

Thank you.

Upvotes: 2

Views: 5517

Answers (2)

Craig Loftus
Craig Loftus

Reputation: 205

To address your first problem, you can use itemForElement in your _itemSelected handler:

this.$.myList.itemForElement(e.target);

Where myList is an id attribute on the dom-repeat template.

<iron-selector>
    <template id="myList" is="dom-repeat" items="{{someItems}}"></template>
</iron-selector>

I am not sure about the race condition problem. Where I have done this I have actually put the on-tap event on (in your example) <div class="item">.

Upvotes: 0

John Smidt
John Smidt

Reputation: 21

I was having the same problem with the whole "race condition" issue. Instead of using "on-tap", I used "on-iron-select". This ensures that the function will not be called until a selection has first been made.

So with your code, change this:

    <iron-selector id="listSelection" attr-for-selected="name" on-tap="_itemSelected">

to this:

    <iron-selector id="listSelection" attr-for-selected="name" on-iron-select="_itemSelected">

Hopefully that helps anyone else that is having this problem.

Upvotes: 2

Related Questions