Backbone example

gistfile1.txt

(function($){
  var Project = Backbone.Model.extend({
    url: function() {
      return '/heroku/resources/' + this.id + '.json';
    },
    
    display: function() {      
      this.fetch({
        success: function(model, response) {
          $('#git_url').val(model.get('git_url'));
          $('#public_key').html(model.get('public_key'));
          $('#pid').html(model.get('_id'));
          $('#project').show();
        }
      });
    }
  });
  
  var ProjectView = Backbone.View.extend({       
    el: '#project',
       
    events: {
      'click #save': 'saveProject'
    },
    
    initialize: function() {      
      _.bindAll(this, 'saveProject');
      
      this.project = new Project();
      this.project.id = $("#project_id").val();
      this.render();
    },
    
    render: function() {
      this.project.display();
    },
    
    saveProject: function() {
      alert("clicked save!");
      this.project.git_url = $("#git_url").val();
      this.project.save()
    }
  });

  $(document).ready( function() {
    var projectView = new ProjectView();      
  })
})(jQuery);







<input id="project_id" type="hidden" value="4e67a941abb648000000001a"/>
<div id="project" style="display: none;">
<p><Your>project ID:</Your><div id="pid"></div></p>
<p><label for="git_url">Git URL:</label><input id="git_url" type="text"/></p>
<p><label for="public_key">Here is your deploy key:</label><br/>
<textarea id="public_key"></textarea></p>
<p><input id="save" type="button" value="Save"/></p>
</div>