Let's add an edit project form for our feature Edit a project. It consists of a text box for the project name a save and cancel button. Clicking on save will PUT the project to our Express server; clicking on cancel closes the form. We will use the same handlebars template we used for adding a project. In order to make RepositoryListView editable, we will need to introduce the concept of an edit state. We have called editMode.

Let's make some changes to projectView. We start by adding a new event edit to the events hash, which calls an edit function. We change our repository method by passing a new arg.editMode to event_aggregator, which will inform our RepositoryListView that it is in edit mode.

The edit method, which displays our project formTemplate, populated with our project model data calls the repository method with editMode set to false, informing RepositoryListView that it is in edit mode. Finally, we update our add, cancel, and save methods; calls in these methods to the repository method should pass {editMode:false}.

    Events: {
      ...
        "click button.edit": "edit"
    },

    repository: function(args) {
      var data = { projectId: this.model.toJSON()._id, editMode: args.editMode || false }
      ...
    },

    edit: function () {
      var model = this.model.toJSON();
      this.$el.html(this.formTemplate(model));
      this.repository({editMode:true});
    },

Let's make some changes to RepositoryListView. The initialize method will now either enable or disable the form checkboxes based on editMode when collection.fetch makes a successful request. The enableForm function removes the disabled tag from our RepositoryListView checkbox list. The disableForm function adds the disabled tag to our RepositoryListView checkbox list.

    initialize: function (args) {
      ...
      this.collection.fetch({ success: function(){
        me.render();
        (args.editMode) ?  me.enableForm() : me.disableForm();
      }});
    },

    enableForm: function(){
      this.$el.find("input:checkbox").remove('disabled'),
    },

    disableForm: function(){
      this.$el.find("input:checkbox").attr('disabled', 'disabled'),
    }

Now you will be able to edit your existing projects.