So far, we have looked up updating records and validating those updates. Today, we will look first at deleting records, then we will look at creating records in Ember.

First, we are going to once again use a helper from DockYard. This one is called ember-route-action-helper . This helper allows us to pass actions from our route down to components while still using a closure action. You might remember that actions called using a closure action don't bubble, they simply reference functions on the controller and pass those functions to components. However, when we are deleting a record, we are changing state that belongs to the route, not the controller, so we want the delete action to live on the route. To use this helper, let's first install it, then start our server.

ember install ember-route-action-helper
ember s

Now in our index template we can pass a delete action to our component and not only will this action direct the call to our route, but it will bubble up the route tree. So we will just add this route-action.

In app/templates/contacts/contact/index.hbs :

{{contact-card contact=model delete=(route-action 'delete')}}

Now, let's add our delete action to the contact route.

In app/routes/contacts/contact.js :

import Ember from 'ember';

export default Ember.Route.extend({
  model(params){
    return this.store.findRecord('person', params.person_id);
  },
  actions: {
    delete(model){
      model.destroyRecord().then(()=>{
        this.transitionTo('contacts');
      });

    }
  }
});

Now, all we need to do is call the delete action from the contact-card template.

In app/templates/components/contact-card.hbs add a delete action and pass in the contact that will be deleted.

<a href='#' {{action delete contact}}>Delete</a>

That is it for deleting records. Now, we need to look at creating records.

Let's start by generating a new route.

ember g route contacts/new

Now, let's set up our new template with a form for creating a new contact. In most cases, we could probably use the same form component we set up for our edit form, but since we used an addon to help us manage editing our contacts, let's walk through creating a contact without any addons. Open up your template in app/templates/contacts/new.hbs and add all of the inputs that you will need to create your contact.

{{#if errors}}
  <div class="alert alert-danger">
     {{errors}}
  </div>
{{/if}}
<form>
  <div class="form-group">
    <label>First Name: </label>{{input class="form-control" value=newFirstName}}
  </div>
  <div class="form-group">
    <label>Last Name: </label>{{input class="form-control" value=newLastName}}
  </div>
  <div class="form-group">
    <label>Email: </label>{{input class="form-control" value=newEmail}}
  </div>
  <div class="form-group">
    <label>Phone: </label>{{input class="form-control" value=newPhone}}
  </div>
  <div class="form-group">
    <label>Title: </label>{{input class="form-control" value=newTitle}}
  </div>
  <div class="form-group">
    <label>Avatar: </label>{{input class="form-control" value=newAvatar}}
  </div>

  <button class="btn btn-primary" {{action 'submit'}} disabled={{errors}}>Submit</button>
</form>

Now, let's implement our create action. What I am going to do is set up kinda like a proxy action in the controller that action will wrap up an plain JavaScript object and make it look like we want then we will pass that object to our route. In our route we will create and save the object. First, let's create a controller for our new template. In app/controllers/contacts/new.js . Then, we will create a submit action that we are calling from our template. In here, let's create a newPerson object that contains all of the properties that we input in our template. Then let's send an action called createPerson that we will setup on the Route. We will pass our newly created object to this action.

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    submit(){
      let newPerson = {
        firstName: this.get('newFirstName'),
        lastName:  this.get('newLastName'),
        email:     this.get('newEmail'),
        phone:     this.get('newPhone'),
        title:     this.get('newTitle'),
        avatar:    this.get('newAvatar'),
      };
      return this.send('createPerson', newPerson);
    }
  }
});

Now, let's set up the route for a new contact. Inside of our new route, we will create a createPerson action that will accept an object with all of the new record's properties and then use the store's createRecord method to create a new instance of our person model. Finally we will save our new person. Save here returns a promise, so if our save is successful, we will transition to the newly created contact, if there is an error, we will just log it out to the console for now.

In app/routes/contacts/new.js :

import Ember from 'ember';

export default Ember.Route.extend({
  actions: {
    createPerson(newProperties){
      let newPerson = this.store.createRecord('person', newProperties);
      return newPerson.save().then((savedPerson)=> {
        this.transitionTo('contacts.contact', savedPerson.get('id'))
      }, (error) => {
        console.log(error);
      });
    }
  }
});

Now, that works, we can successfully delete and create person records. That is it for today. Tomorrow we will look at some links and get an exercise.