使用聚合物铁选择器事件

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>

我在两个方面苦苦挣扎：

什么配置包括 attribute/property 我使用什么来访问所选项目的值？在此示例中，我已尝试将其配置为使用 "name" 值。这在本例中不起作用。我已经让它工作了，但不记得是如何工作的；排列可能包括 "item.name" 或“{{name}}”或“{{item.name}}”。
我有一个竞争条件。点击事件触发并调用 _ItemSlected。但是当我读取这个函数中的值时，它们并没有更新。我第二次点击并触发事件时，值现在已设置，但要精确到最后一次选择。

我真的很看重 iron-selector 与绑定（即与 {}）和事件触发（包括使用 arr-for-selected 和 on-tap 事件）一起使用的不错示例。

谢谢。

Answer 1

要解决您的第一个问题，您可以在 _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">.

Answer 2

我在整个 "race condition" 问题上遇到了同样的问题。我没有使用 "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">

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

使用聚合物铁选择器事件

using polymer iron-selector events

javascript

dhtml

polymer