Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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>
​
​
​
​
 
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers