javascript - 使用 polymer 铁选择器事件

Question

这是我与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>
...

后面是这个脚本(也有删节)

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

我在两个方面苦苦挣扎:

1. 我使用什么配置(包括哪个属性/属性)来访问所选项目的值？在此示例中，我尝试将其配置为使用“name”值。这在本例中不起作用。我已经让它工作了，但不记得是如何工作的；排列可能包括“item.name”或“{{name}}”或“{{item.name}}”。

2. 我遇到的是竞争条件。点击事件触发并调用 _ItemSlected。但是当我读取这个函数中的值时，它们没有更新。我第二次点击并获取要触发的事件时，现在已设置值，但要精确到最后的选择。

我真的很看重铁选择器与绑定(bind)(即与 {})和事件触发(包括使用 arr-for-selected 和 on-tap 事件)一起使用的一个不错的例子。

谢谢。

Answer 1

我在整个“竞争条件”问题上遇到了同样的问题。我没有使用“on-tap”，而是使用“on-iron-select”。这可确保在首次做出选择之前不会调用该函数。

因此，对于您的代码，请更改以下内容:

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

对此:

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

希望这对遇到此问题的其他人有所帮助。