CanJS jQuery Template

Includes jQuery, CanJS and all of its plugins. Use it as a starting point when you want to demo something.

by cherif_b

HTML

<script src="http://canjs.us/release/latest/can.jquery.js"></script>
<script src="http://canjs.us/release/latest/can.construct.proxy.js"></script>
<script src="http://canjs.us/release/latest/can.control.plugin.js"></script>
<script src="http://canjs.us/release/latest/can.observe.attributes.js"></script>
<script src="http://canjs.us/release/latest/can.observe.backup.js"></script>
<script src="http://canjs.us/release/latest/can.observe.delegate.js"></script>
<script src="http://canjs.us/release/latest/can.observe.setter.js"></script>
<script src="http://canjs.us/release/latest/can.observe.validations.js"></script>
<script src="http://canjs.us/release/latest/can.view.modifiers.js"></script>
<script src="http://canjs.us/release/latest/can.fixture.js"></script>
<script src="http://canjs.us/release/latest/can.view.mustache.js"></script>
<div class="header">
    <h1>Association</h1>
</div>
<!-- YOUR CODE HERE -->
<div id="contacts"></div>

CSS

.header {
    background: #E1E3E1;
    padding: 10px 0;
    border-bottom: 1px solid #B5B6B5;
    margin-bottom: 15px;
}
h1 {
    font-size: 24px;
    font-weight: bold;
}
p { 
    margin: 10px 0;
}

JavaScript

can.fixture("/contacts.json", function(){
  return [{
    'id': 1,
    'name' : 'Justin Meyer',
    'birthday': '1982-10-20',
    tasks : [{
      id: 1, 
      title: "write up model layer", 
      due: "2010-10-5"
    }]},{
    'id': 2,
    'name' : 'Brian Moschel',
    'birthday': '1983-11-10',
    tasks : [{
      id: 2, 
      title: "write up funcunit", 
      due: "2009-5-1"
    },{
      id: 3, 
      title: "test funcunit", 
      due: "2010-3-15"}]
    },{
      'id': 3,
      'name' : 'Bobby Joe',
      'birthday': '1980-2-10'
  }];
})

can.Model.convert.date = function(raw){
  if(typeof raw == 'string'){
    var matches = raw.match(/(\d+)-(\d+)-(\d+)/);
      return new Date( +matches[1], 
        (+matches[2])-1, 
        +matches[3] );
  }else if(raw instanceof Date){
    return raw;
  }
};

// A task model that has a date
can.Model("Task",{
  attributes : {
    due : 'date',
  }
},{
  weeksPastDue : function(){
    return Math.round( (new Date() - this.due) /
      (1000*60*60*24*7 ) );
  }
});

// A contact model that has many tasks
can.Model("Contact",{
  attributes : { 
    birthday : 'date',
    tasks: "Task.models"
  },
  findAll : "/contacts.json"
},{
  ageThisYear : function(){
    return new Date().getFullYear() - 
      this.birthday.getFullYear()
  },
  getBirthday : function(){
    return ""+this.birthday.getFullYear()+
      "-"+(this.birthday.getMonth()+1)+
      "-"+this.birthday.getDate();
  }
});

// Get all contacts and put them on the page
Contact.findAll({},function(contacts){
  var contactsEl = can.$('#contacts');

  can.each(contacts, function(contact){
    var li = can.$('<li>')
      .html(contact.name + " "+ contact.ageThisYear())
      .appendTo(contactsEl);

    var ul = can.$("<ul>");
    var tasks = contact.attr('tasks')
    
    if(tasks){
      tasks.each(function(){
        this.attr('contact', contact);
        ul.append('<li>'+this.title+" "
        +this.weeksPastDue()+' contact: '+ this.attr('contact.name')...