使用聚合物铁选择器事件

Question

这是我与铁选择器一起使用的（删节的）代码

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

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

我真的很重视与绑定（即使用 {}）和事件触发（包括使用 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">

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

Answer 2

要解决您的第一个问题，您可以在 _itemSelected 处理程序中使用 itemForElement：

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

其中myList 是dom-repeat 模板上的id 属性。

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

我不确定比赛条件问题。在我这样做的地方，我实际上已经将on-tap 事件放在（在您的示例中）<div class="item">。