gistfile1.js

// model
window.Medication = Backbone.Model.extend({
  defaults: {
    "user_id":  "1002"
  },

  toJSON : function(){ return {
    medication_option: _.clone(this.attributes)}; 
  }
});

// collection
window.MedicationCollection = Backbone.Collection.extend({
  model: Medication,
    url: 'http://localhost:3000/medication_options.json'
});

window.Medications = new MedicationCollection;

// views
window.MedicationView = Backbone.View.extend({
  events: {
    "click .medication-edit"     : "editMedication"
  },

  initialize: function() {
    _.bindAll(this, 'render', 'editMedication');
    this.model.bind('change', this.render);
    this.model.view = this;
  },
  
  render: function() {
    this.el = ich.medicationTemplate(this.model.attributes);
    
    return this;
  },

  editMedication: function() {
    alert("edit");
  },

  remove: function() {
    alert("delete");
    this.model.destroy();
  }
});


window.AppView = Backbone.View.extend({

  el: $('#medicationArea'),

  events: {
    "submit #medicationForm" : "newMedication"
  },

  initialize: function() {
    _.bindAll(this, 'addOne', 'addAll', 'render');
  
    this.input = this.$("#medication_name");
    this.medicationList = this.$('#medicationList');
    
    Medications.bind('add',     this.addOne);
    Medications.bind('refresh', this.addAll);
    Medications.bind('all',     this.render);
    
    Medications.fetch();
  },

  render: function() {
    $('#medicationHeader').html(ich.medicationHeaderTemplate({ count: Medications.length }));
    return this;
  },

  newMedication: function(data) {
    Medications.create({name: this.input.val()});
    this.input.val('');
  },

  addOne: function(medication) {
    var view = new MedicationView({model: medication}).render().el;
    this.medicationList.append(view);
  },

  addAll: function() {
    Medications.each(this.addOne);
  }
})

// controller
var MedicationsController = {
  init: function (spec) {
    this.config = {
        connect: true
    };

    _.extend(this.config, spec);

    this.view = new AppView;

    return this;
  }
};

gistfile2.html

  <div id="medicationArea">
    <div id="medicationHeader">
      
    </div>
    <div id="medicationList">
      
    </div>
    <form method="post" action="#" id= 'medicationForm' name="newMessage" onsubmit="return false">
      <input name='name' type="text" id="medication_name" />
      <input type="submit" value='Create Medication'/>
    </form>
  </div>

// templates
<script id="medicationHeaderTemplate" type="text/html">
  <h3>{{ count }} Medications</h3>
</script>
<script id="medicationTemplate" type="text/html">
    <p class="medication">
      {{ name }}
      <a href="#" onclick='return false;' class="medication-edit">Edit</a> 
      <a href="#" onclick='return false;' class="medication-remove">Remove</a>
    </p>
 </script>

//html script init
<script>        
  $(document).ready(function () {
    window.app = MedicationsController.init({});
  });     
</script>

gistfile3.txt