Learning Backbone

app.js

//Trying to put it all in one file then break it out later.

// Load the application once the DOM is ready
$(function(){
////////////////////////////////////////////////////////
  // Dog Model
////////////////////////////////////////////////////////
  window.Dog = Backbone.Model.extend({
    

    //Uses a ternary operator to return '/dogs/:id' if this.id is true, and '/dogs' if false.
    //This gets called by Dogs.create(...)
    url : function() {
      return this.id ? '/dogs/' + this.id : '/dogs';
    },
    
    //Default attributes for a dog
    defaults: { dog: {
      name: "Fido",
      color: "Black",
      age: 9
    }},
    
    //Check that each Dog has a name, if it doesn't then the defaults for Fido are assigned.
    initialize: function() {
      var dog_obj = this.get("dog");

      if (!dog_obj.name) {
        //alert("Setting as the defaults because Dog name is blank!");
        var default_dog = this.defaults.dog;
        this.set({"dog": {
          "name": default_dog.name,
          "color": default_dog.color,
          "age": default_dog.age
        }});
      }
    }
    
    
  }); //End Dog Model
  
//////////////////////////////////////////////////////
  //Dogs Collection
//////////////////////////////////////////////////////

  window.DogList = Backbone.Collection.extend({
    model: Dog,
    url:'/dogs' 
  });

  window.Dogs = new DogList;
  
/////////////////////////////////////////////////////
  //A Dog View
/////////////////////////////////////////////////////

  window.DogView = Backbone.View.extend({
      
      //Dom element for a Dog is a list tag.
      tagName:  "tr", 
      
      events: {
        //Bind CRUD events here.
      },
      
      initialize: function() {
          this.render();
          //_.bindAll(this, 'render');
          //this.model.bind('change', this.render);
          //this.model.view = this;
      },
      
      render: function() {
          var dog_model = this.model.toJSON().dog;
          
          $(this.el).html(ich.dog_template(dog_model));
          this.setContent(); //This is not the best practice method of initializing the view
          return this;
      },
      
      setContent: function() {
        var dog = this.model.get('dog');
        var name  = dog.name; //this.model.get('name');
        var color = dog.color; //this.model.get('color');
        var age   = dog.age; //this.model.get('age');
        
        //alert(name + ' ' + color + ' ' + age);
        
        this.$('.dog-name').text(name);
        this.$('.dog-color').text(color);
        this.$('.dog-age').text(age);
      }
  });


/////////////////////////////////////////////////////
  //The Application
/////////////////////////////////////////////////////

  window.AppView = Backbone.View.extend({
    
    //Found in index.html.erb
    el: $("#dogsapp"),

    events: {
      "click #new-dog-submit": "createDog"
    },

    // At initialization we bind to the relevant events
    // collection, when items are added or changed.
    initialize: function() {
      _.bindAll(this, 'addOne', 'addAll');

      this.name_input   = this.$("#new-dog-name");
      this.color_input  = this.$("#new-dog-color");
      this.age_input    = this.$("#new-dog-age");

      Dogs.bind('add',     this.addOne); //The 'add' event gets fired by the create, I think...
      Dogs.bind('refresh', this.addAll); //A page refresh?
      Dogs.bind('all', this.render); //'all' means any event

      //This GETs the model from the Server and should be used for Lazy loading of models
      //not for initilizing a view as it is used here.
      Dogs.fetch();
    },
    
    addOne: function(dog) {
      //dog contains the Rails JSON object in the form {dog:{name: "Fido", color: "Brown", age: 4}}
      var view = new DogView({model: dog}); 

      this.$("#dog-table").append(view.render().el); //view.render() calls the render method from the DogView
    },
    
    addAll: function() {
      Dogs.each(this.addOne);
    },
    
    newAttributes: function() {
      return {
        name:  this.name_input.val(),
        color: this.color_input.val(),
        age:   this.age_input.val(),
      };
    },    
    createDog: function(e) {
      //if (e.keyCode != 13) return;
      //Dogs.create(this.newAttributes());
      
      var params = {"dog": this.newAttributes()};
      //$.post("/dogs", params, null, "json");
      Dogs.create(params);
      
      this.name_input.val('');
      this.color_input.val('');
      this.age_input.val('');
    },

  });

  // Finally, we kick things off by creating the **App**.
  window.App = new AppView;


/////////////////////////////////////////////////////


/////////////////////////  
}); //End jQuery DOM load

Come to #cdnjs if you ever need help =D