Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="http://jashkenas.github.io/underscore/underscore-min.js"></script>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://canjs.com/release/2.0.5/can.jquery.js"></script>
<meta name="description" content="CanJS filtered list" />
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="app">
    
  </div>
  
  
  <script type="text/mustache" id="view">
   <h2>Birthday this month</h2>
   <ul> 
    {{#birthdayThisMonth people}}
          <li>{{name}} - {{birthdate}}</li>
     {{/birthdayThisMonth}}
   </ul>
  </script>
  
</body>
</html>
 
// CanJS filtered list
 
var Control = can.Control({
  init: function (ele, options) {
    
    var people = new can.Map.List([
      {name: 'James', birthdate: '1980-01-01'},
      {name: 'Zack', birthdate: '1982-02-01'},
      {name: 'Mary', birthdate: '1982-03-01'},
      {name: 'Juno', birthdate: '1982-02-15'}
    ]);
    
    var helpers = {
      birthdayThisMonth: function (people, options) {
        if (people && people.length) {
          
          var res = [];
          for (var a = 0; a < people.length; a++) {
            var person = people[a];
            var bd = person.attr('birthdate');
            if (new Date(bd).getMonth() === (new Date).getMonth() ) {
                res.push(options.fn(person));
            }
          }
          
          return res.join(' ');
          
        }
      }
    }
    
  
    var view = can.view('view', {people: people}, helpers);
    this.element.html(view);
  }
});
var control = new Control('.app');
Output 300px

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

Dismiss x
public
Bin info
sportopro
0viewers