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>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <base href="//polygit.org/polymer+:master/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="paper-input/paper-input.html" rel="import">  
  <link href="paper-toggle-button/paper-toggle-button.html" rel="import">
​
</head>
<body>
  <dom-module id="custom-element">
    <template>
      Hello {{name.first}}
      <paper-input value="{{name.first}}"></paper-input>
      <template is="dom-repeat" items="{{name.letters}}">
        <div>[[computeResult(item.value)]]</div>
        <paper-toggle-button checked="{{item.value}}"></paper-toggle-button>
      </template>
      <button on-tap="addElement">Add</button>
    </template>
  </dom-module>
  <custom-element foo-bar="World"></custom-element>
  <script> 
    Polymer({
      is: 'custom-element',
      properties: {
        fooBar: {
          type: String,
        },
        name: {
          type: Object,
          value: function() {
            return {letters: []};
          },
          notify: true
        }
      },
      computeResult: function(val) {
        if(val) return 'Hello';
        return 'World';
      },
      addElement: function() {
        this.push('name.letters', {});
      }
    });
  </script>
</body>
</html>
Output

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

Dismiss x
public
Bin info
travellhynepro
0viewers