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>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/polymer.js"></script>
  <meta charset="utf-8">
  <title>Polymer Nested Custom Element: Name List</title>
</head>
<body>
<ts-names id="name-list"></ts-names>
    <input type="text" placeholder="Enter a Name" id="name-input">
    <button id="add-button"> Add</button>
    <script>
        var addButton = document.querySelector("#add-button"),
            nameList = document.querySelector("#name-list");
        addButton.addEventListener("click",function(e){
            var newName= document.querySelector("#name-input").value;
            nameList.studentList.push({name:newName});
        })
    </script>
​
    <polymer-element name="ts-red">
​
        <template>
            <style>
                span {
                    color:red;
                }
            </style>
            <span>{{intext}}</span>
        </template>
        <script>
            Polymer("ts-red",{
                publish:{
                    intext:""
                }
            });
        </script>
    </polymer-element>
​
    <polymer-element name="ts-names" >
        <template>
            <ol>
                <template repeat="{{student in studentList}}">
                    <li><ts-red intext="{{student.name}}"></ts-red></li>
                </template>
            </ol>
        </template>
        <script>
        Polymer('ts-names',{
            studentList:[
                {name:"Sandeep"},
                {name:"Surabhi"},
                {name:"Sangeeta"},
                {name:"Sumanta"}
            ]
        });
        </script>
    </polymer-element></body>
</html>
 
​
Output

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

Dismiss x
public
Bin info
saan1984pro
0viewers