聚合物 1.x：切换 <array-selector>

Question

我想使用 <array-selector> 切换项目。

当我单击所选列表中的项目时，我希望它从该列表中消失。但是，没有任何反应。

要重现问题，请按照以下步骤操作。

Open this jsBin.
单击员工列表中的一项或多项。
查看所选列表下方显示的那些项目。
仍然在顶部的员工列表中，单击出现在底部所选列表中的项目。
看到该项目从所选列表中消失（切换）。
在选定的列表中，单击一个项目。
请注意，项目不会消失（切换）。

如何切换选中的列表项？

http://jsbin.com/lodetopuzu/edit?html,输出

<!doctype html>

<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">

</head>

<body>

<dom-module id="employee-list">

  <template>

    <array-selector id="selector"
                    items="{{employees}}"
                    selected="{{selected}}"
                    toggle
                    multi></array-selector>

    <div><strong>Employees</strong>:</div>
    <template is="dom-repeat"
              id="employeeList"
              items="{{employees}}">
      <div on-tap="_toggleSelection">
        <span>{{item.first}}</span>
        <span>{{item.last}}</span>
      </div>
    </template>
    <br />
    <div><strong>Selected</strong>:</div>
    <template is="dom-repeat" items="{{selected}}">
      <div on-tap="_toggleSelection">
        <span>{{item.first}}</span>
        <span>{{item.last}}</span>
      </div>
    </template>        

  </template>

  <script>
    Polymer({
      is: 'employee-list',
      properties: {
        employees: {
          type: Array,
          value: function() {
            return [
              { first: 'Vince' , last: 'Lombardi'   } ,
              { first: 'Weeb'  , last: 'Ewbank'     } ,
              { first: 'Hank'  , last: 'Stram'      } ,
              { first: 'Don'   , last: 'McCafferty' } ,
              { first: 'Tom'   , last: 'Landry'     } ,
              { first: 'Don'   , last: 'Shula'      } ,
              { first: 'Chuck' , last: 'Knoll'      } ,
              { first: 'John'  , last: 'Madden'     } ,
            ]
          },
        },
      },
      _toggleSelection: function(e) {
        console.log(e.target);
        var item = this.$.employeeList.itemForElement(e.target);
        this.$.selector.select(item);
      },
    });
  </script>

</dom-module>

  <employee-list></employee-list>

</body>

Answer 1

问题是您对 <template is="dom-repeat"> 使用相同的 _toggleSelection。

这一行在_toggleSelection

var item = this.$.employeeList.itemForElement(e.target);

单击第二个 dom-repeat 中的项目时无效。

Answer 2

解决方案更改函数

_toggleSelection: function(e) {  
   var item1  = this.$.selectedList.itemForElement(e.target);        
   var item =  this.$.employeeList.itemForElement(e.target); 
   this.$.selector.select(item||item1);
}

并将选中列表的id添加到selectedList

<template id="selectedList" is="dom-repeat" items="{{selected}}">

http://jsbin.com/cuyosucame/edit?html,output

Answer 3

正如@GünterZöchbauer 所说，方法 .itemForElement(e.target) 应用于 $.employeeList 引用的元素，这是第一个列表，而不是第二个。

@Alon提供的解决方案全文如下：

http://jsbin.com/yowicumiyu/1/edit?html,输出

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">

</head>

<body>

<dom-module id="employee-list">

  <template>

    <array-selector id="selector"
                    items="{{employees}}"
                    selected="{{selected}}"
                    toggle
                    multi></array-selector>

    <div><strong>Employees</strong>:</div>
    <template is="dom-repeat"
              id="employeeList"
              items="{{employees}}">
      <div on-tap="_toggleSelection">
        <span>{{item.first}}</span>
        <span>{{item.last}}</span>
      </div>
    </template>
    <br />
    <div><strong>Selected</strong>:</div>
    <template is="dom-repeat"
              id="selectedList"
              items="{{selected}}">
      <div on-tap="_toggleSelection">
        <span>{{item.first}}</span>
        <span>{{item.last}}</span>
      </div>
    </template>        

  </template>

  <script>
    Polymer({
      is: 'employee-list',
      properties: {
        employees: {
          type: Array,
          value: function() {
            return [
              { first: 'Vince' , last: 'Lombardi'   } ,
              { first: 'Weeb'  , last: 'Ewbank'     } ,
              { first: 'Hank'  , last: 'Stram'      } ,
              { first: 'Don'   , last: 'McCafferty' } ,
              { first: 'Tom'   , last: 'Landry'     } ,
              { first: 'Don'   , last: 'Shula'      } ,
              { first: 'Chuck' , last: 'Knoll'      } ,
              { first: 'John'  , last: 'Madden'     } ,
            ]
          },
        },
      },
      _toggleSelection: function(e) {
        var item1 = this.$.selectedList.itemForElement(e.target);
        var item2 = this.$.employeeList.itemForElement(e.target);
        this.$.selector.select(item1||item2);
      },
    });
  </script>

</dom-module>

  <employee-list></employee-list>

</body>
</html>

聚合物 1.x：切换 <array-selector>

Polymer 1.x: Toggle <array-selector>

polymer

polymer-1.0