[Backbone] Working with forms

Our first step is to add a template to the AppointmentForm below. Have the template produce a form with two inputs, one for the title of the appointment and one for the name of the person on the appointment. So the "name" attributes on the inputs should be name and title, respectively. Yes, you'll have an input with name="name". YOLO.

var AppointmentForm = Backbone.View.extend({
  template: _.template('<form><input type="text" name="title" /><input type="text" name="name" /></form>'),
});

 

Now write the render function to render the template and pass in the model attributes. Return this from the render function.

var AppointmentForm = Backbone.View.extend({
  template: _.template('<form><input name="title" type="text" /><input name="name" type="text" /></form>'),
  render: function(){
    this.$el.html(this.template(this.model.attributes));
      return this;
  }
});

 

Update the template to use the title and name attributes from the model to fill out the value attributes of the input elements in the template.

var AppointmentForm = Backbone.View.extend({
  template: _.template('<form><input name="title" type="text" value="<%= title%>"/><input name="name" type="text" value="<%= name%>"/></form>'),
  render: function(){
    this.$el.html(this.template(this.model.attributes));
    return this;
  }
});

 

Update the AppointmentForm view to handle the submit event on the form. Also go ahead and implement the function to handle that event. It should save both the title and name attributes on the model with values from their respective inputs. Make sure the event function stops the default event from happening (which would cause the browser to submit the form, instead of us handling it with our Backbone model.)

var AppointmentForm = Backbone.View.extend({
  template: _.template('<form><input name="title" type="text" value="<%= title %>" /><input name="name" type="text" value="<%= name %>" /></form>'),
  events: {
    'submit': 'save'
  },
  render: function(){
    this.$el.html(this.template(this.model.attributes));
    return this;
  },
  save: function(e){
    e.preventDefault();
    var title = this.$('input[name="title"]').val();
       var name = this.$('input[name="name"]').val();
    this.model.save({title: title, name: name});
  }
});

 

After submitting the form and saving the model, make sure we navigate the user back to the index route ''. Also, make sure this only happens if the model is saved successfully.

var AppointmentForm = Backbone.View.extend({
  template: _.template('<form><input name="title" type="text" value="<%= title %>" /><input name="name" type="text" value="<%= name %>" /></form>'),
  events: {
    'submit': 'save'
  },
  render: function(){
    this.$el.html(this.template(this.model.attributes));
    return this;
  },
  save: function(e){
    e.preventDefault();
    var title = this.$('input[name="title"]').val();
    var name = this.$('input[name="name"]').val();
    this.model.save({title: title, name: name}, {
      success: function(){
       Backbone.history.navigate('', {trigger: true});
      }
    });

 

It's possible that saving the appointment on the server will fail and the server will respond with error messages. Add an error callback to the save call to handle this case and alert the user with the errors from the response.

var AppointmentForm = Backbone.View.extend({
  template: _.template('<form><input name="title" type="text" value="<%= title %>" /><input name="name" type="text" value="<%= name %>" /></form>'),
  render: function(){
    this.$el.html(this.template(this.model.attributes));
    return this;
  },
  events: {
    submit: "save"
  },
  save: function(e){
    e.preventDefault();
    var newTitle = this.$('input[name=title]').val();
    var newName = this.$('input[name=name]').val();
    this.model.save({title: newTitle, name: newName}, {
      success: function(){
        Backbone.history.navigate('', {trigger: true});
      },error: function(model, xhr, options){
        var error = JSON.parse(xhr.responseText).errors;
        alert(error);
      }
    });
  }
});