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>Polymer</title>
  
  <script src="http://www.polymer-project.org/platform.js"></script>
  <link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
​
  </head>
<body>
  
  <repeat-slice></repeat-slice>
  
  <polymer-element name="repeat-slice">
  <template>
    Number of elements to slice: {{range}}<br>
    <input type="range" min="1" max="10" value="{{range}}">
    <br><br>
    <button on-tap="{{alter}}">Alter Array</button>
    <hr>
    <template repeat="{{post in slice}}">
      <h3>{{post.name}}</h3>
    </template>
    <hr>
    <template repeat="{{post in posts}}">
      <h3>{{post.name}}</h3>
    </template>
  </template>
  <script>
    Polymer('repeat-slice', {
      posts: [
        {name: "Alpha"},
        {name: "Beta"},
        {name: "Gamma"},
        {name: "Delta"}
      ],
      range: 2,
      kick: 0,
      computed: {
        slice: 'sliced(posts, range, kick)'
      },
      sliced: function(posts, range) {
        return posts.slice(1, Number(range) - 1);
      },
      postsChanged: function() {
        this.kick++;
      },
      alter: function() {
        this.posts.splice(1, 0, {name: "Iota" + Math.floor(Math.random() * 100 + 99)});
      }
    });
  </script>
  </polymer-element>
  
</body>
</html>
​
Output

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

Dismiss x
public
Bin info
sjmilespro
0viewers