Skip to content

Step 8 - Add new contact
Compare
Choose a tag to compare
@dmytroyarmak dmytroyarmak released this 03 Feb 10:17
step-8
7b7739a

  1. Add new contact button under contacts list:

      <script type="text/template" id="tpl-contacts">
    <h2 class="page-header text-center">List of contacts</h2>
    <p class="text-center">
      <a href="#contacts/new" class="btn btn-lg btn-outline">Add Contact</a>
    </p>
    <ul class="media-list row contacts-container"></ul>
  </script>

  2. Add Contact Form view and template
    js/views/contactForm.js

    ContactManager.Views.ContactForm = Backbone.View.extend({
template: _.template($('#tpl-new-contact').html()),
render: function() {
  var html = this.template();
  this.$el.append(html);
  return this;
}
});

    index.html:

      <script src="app/js/views/contactForm.js"></script>

    template:

      <script type="text/template" id="tpl-new-contact">
    <h2 class="page-header text-center">Create Contact</h2>
    <form role="form" class="form-horizontal contract-form">
      <div class="form-group">
        <label class="col-sm-4 control-label">Full name:</label>
        <div class="col-sm-6">
          <input type="text" class="form-control contact-name-input">
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-4 control-label">Email address:</label>
        <div class="col-sm-6">
          <input type="email" class="form-control contact-email-input">
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-4 control-label">Telephone number:</label>
        <div class="col-sm-6">
          <input type="tel" class="form-control contact-tel-input">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-4 col-sm-3">
          <button type="submit" class="btn btn-outline btn-lg btn-block">Submit</button>
        </div>
        <div class="col-sm-3">
          <a href="#contacts" class="btn btn-outline btn-lg btn-block">Cancel</a>
        </div>
      </div>
    </form>
  </script>

  3. Render ContactForm view on #/contacts/new route:

      router.on('route:newContact', function() {
    var newContactForm = new ContactManager.Views.ContactForm();

    $('.main-container').html(newContactForm.render().$el);
  });

  4. Listen to form submit and trigger event with form's data:

    events: {
  'submit .contract-form': 'onFormSubmit'
},

/* ... */

onFormSubmit: function(e) {
  e.preventDefault();

  this.trigger('form:submitted', {
    name: this.$('.contact-name-input').val(),
    tel: this.$('.contact-tel-input').val(),
    email: this.$('.contact-email-input').val()
  });
}

  5. Create new Contact on form submitted:

      router.on('route:newContact', function() {
    var newContactForm = new ContactManager.Views.ContactForm();

    newContactForm.on('form:submitted', function(attrs) {
      attrs.id = contacts.isEmpty() ? 1 : (_.max(contacts.pluck('id')) + 1);
      contacts.add(attrs);
      router.navigate('contacts', true);
    });

    $('.main-container').html(newContactForm.render().$el);
  });

Difference

Assets 2