问题描述:

I want to toggle items using <array-selector>.

When I click an item from the selected list, I expect it to disappear from that list. But instead, nothing happens.

To recreate the problem, follow these steps.

  1. Open this jsBin.
  2. Click one or more items from the employee list.
  3. See those items appear below in the selected list.
  4. From still in the employee list at the top, click an item that appears in the selected list at the bottom.
  5. See that item disappear (toggle) from the selected list.
  6. At the selected list, click an item.
  7. Notice that item does not disappear (toggle).

How does one make the selected list items toggle?

http://jsbin.com/lodetopuzu/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" 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>

网友答案:

Solution change the function

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

and add id to the selected list to selectedList

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

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

网友答案:

The problem is that you use the same _toggleSelection for both <template is="dom-repeat">.

This line in _toggleSelection

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

is invalid when an item from the second dom-repeat is clicked.

网友答案:

As @GnterZchbauer said, the method .itemForElement(e.target) is applied to the element referenced by $.employeeList which is the first list, not the second.

The full text of the solution provided by @Alon is as follows:

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>
相关阅读:
Top