Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script>
​
   <link rel="import" href="//www.polymer-project.org/components/core-elements/core-elements.html">
  <meta charset="utf-8">
  <title><Polymer CORE SELECTOR Element:Name List</title>
   
</head>
<body>
<ts-names-list id="name-list">
    </ts-names-list>
​
    <polymer-element name="ts-names-list" >
        <template>
            <style>
                h3{
                  cursor: pointer;
                }
               .core-selected.red{
                  color: red;
               }
               .core-selected.red:after{
                    content: " FAIL ";
                }
                .core-selected.green{
                    color: green;
                }
                .core-selected.green:after{
                    content: " PASS ";
                }
            </style>
            <core-selector id="student-selector"
                           valueattr="student-name"
                           on-core-activate="{{studentHandler}}}">
              <template repeat="{{student in studentList}}">
                  <h3 student-name="{{student.name}}"
                      student-score="{{student.score}}">
                  {{student.name}}
                   belongs to {{student.country}} has scored
                  {{student.score}} in examination.</h3>
                </template>
            </core-selector>
        </template>
        <script>
        Polymer('ts-names-list',{
            studentList:[
                {name:"Sandeep",country:"India",score:20},
                {name:"Surabhi",country:"Japan",score:70},
                {name:"Sangeeta",country:"Nepal",score:15},
                {name:"Sumanta",country:"China",score:75}
            ],
            studentHandler:function(event,detail,sender){
               var mark = parseFloat(detail.item.getAttribute("student-score"), 10);
               if(mark >30){
                   detail.item.classList.add('green')
                }else{
                   detail.item.classList.add('red')
                }
            }
        });
        </script>
    </polymer-element>
​
</body>
</html>
Output

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

Dismiss x