Use Of Polymer Core Selector Element -Tutorial Savvy

Polymer provides core-selector element for element selection.

In this Demo, “We will learn the use of core selector element“.

In the demo we have maintained a list of student detail in JSON. When user click on any student it is selected and color changes to RED/GREEN base on the mark.If the student score is more then 30 it becomes GREEN and PASS string is get attached in the right side.If the student score is less then 30 it becomes RED and FAIL string is get attached in the right side.

on-core-activate event is the event that get fired when it is selected. CSS class .core-selected is added to the element.

ts-name-selector.html has the code for the demo and listed below.

<!doctype html>
<html>
<head>
    <title>Polymer CORE SELECTOR Element:Name List</title>
    <script src="components/platform/platform.js"></script>
    <link rel="import" href="components/core-selector/core-selector.html">
</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>