backbone.js

//Backbone (similar ones are ember and angular (ember and anguar are more like rails));
//Problems it solves; 
//Its one dependency is underscore; 

//SPA use backbone to make single page applications; 
//Load everything up front; 
//We would just use rails as a JSON API: 

//RESOURCES TODOMVC.com
//coldbhead.github.io/converstional-latin/#phrase/330
//Backbone.js annotates source

//A model is a template for an animal; 
//Take the backbone template and extend it in its own way; 

//You can listen to changes in the model; 

var Animal = Backbone.Model.extend({ //Extend is all the methods that it comes with; 
defaults: { //This is only called once; 
  type: 'animal',
  ecosystem: "",
  stripes: 0
},
initialize: function(){
  alert('I am an animal');
  this.on('change:type', function(){
    var type = model.get('type');
    alert('I am now a ' + type);
  })
}
});

var animal = new Animal()
animal.attributes
animal.set('stripes', 7)
animal.get('stripes')//Will give back number is stripes, can get and set attributes; 

var Zoo = Backbone.Collection.extend({
  model: Animal
});

var myZoo = new Zoo([animal1, animal2]);

var animal1 = new Animal({type: 'giraffe', ecosystem: 'savannah'})

-In the html you define a template; 

el //This is the element that you draw on; The element this view is associateed with; 

var zooView = Backbone.View.extend(){
    el: '#main',
    initialize: function(){
      this.template = _.template($('animal-template').html()) ;
      },
    render: function(){
      
    }
    
    $el//Get the jQuery version(although it is actialyl already jQuery in our case)
;}

//render function, how to put something onto the page; 

//Router is like the controller and the routes file; 
//Similar to Sinatra; 

var AppRouter = Backbone.Router.extend({
  routes: {
    "": "index" //empty route go to the homepage and call the index method
    "animals/:id": "viewAnimal"
  },
  index: function(){ //defining the route methods; 
    zooView = new ZooView({collection: myZoo});
    zooView.render();
  },
  viewAnimal: function(id){ //Add to the URL #animals/12 //Hash routing, work out what state the page is in depening on the hash sign; 
    alert('viewing animal id' + id);
  }
}) 

$(docunment).ready(function(){
   var router = new AppRouter()
    Backbone.history.start();  
}