mvc_example.js

/* MODELS */

var ProjectCollection = function(projects){
  var self = this;
  var projects = projects;
  
  
  this.create = function(attrs){
    projects.push(attrs)
    // might want to a bit of ajax here
    $().trigger('Project-create', [attrs]);
  }
  
  this.all = function(){
    return projects;
  }
}

/* VIEWS */

var ProjectList = function(elem, projects) {
  var elem = elem;
  var projects = projects;
  
  var draw = function(){
    elem.html('')
    for (i in projects.all()){
      add_project(projects.all()[i])
    }
  };
  
  var add_project = function(project){
    elem.append('<p>'+ project['name'] + '</p>')
  }
  
  var add_project_from_event = function(evt, project){
     add_project(project);
  }
  
  $().bind('Project-create', add_project_from_event)
  draw();
}

var ProjectForm = function(elem, project){
  var elem = elem
  
}

/* ROUTES */

var app = $.sammy(function() {
  with(this){
   get('#/', function() { with(this) {
     $('#project_form').hide();
     $('#project_name').val('')
     $('#new_link').show();
   }});
   
   get('#/projects/new', function() { with(this) {
     $('#project_form').show();
     $('#new_link').hide();
   }});
   
   post('#/projects', function() { with(this) {
     Projects.create( { name: params['name'] } );
     redirect('#/');
   }});
   
  }
});

$(function() {
  app.run('#/');
});


// INITIALIZE APP

// existing projects
var existing_projects = [{name: 'foo'}, {name: 'bar'}]

$(document).ready(function(){
  
  Projects = new ProjectCollection(existing_projects);
  
  var project_list = new ProjectList($('#project_list'), Projects );
  var project_form = new ProjectForm($('#project_form'));
  
});