Question

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

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

要重新创建问题，请按以下步骤操作。

Open this jsBin。
点击员工列表中的一个或多个项目。
请参阅所选列表中的以下项目。
仍然位于顶部的员工列表中，点击底部所选列表中显示的项目。
从所选列表中看到该项目消失（切换）。
在所选列表中，单击一个项目。
请注意，项目不会消失（切换）。

如何使所选列表项切换？

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

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

_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,output

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

Polymer 1.x：切换<array-selector>

3 个答案: