Earlier last week I created a post on how to create an Ember project with Node and Express. In the last post we added in Mongo. Now let's see if we can add a little more functionality to our application.

As of now the app can only list quotes that we've already created. The only way to add new quotes is to send a post message to the Node server via curl or Postman. We also can't edit or delete anything. We'll start by adding the edit and delete features in.

If you like to follow along the Node server code is located here on Github. The Ember application is here. Both these repositories will be updated as further tutorials are created.

Ember Setup

To begin we'll need to install bootstrap and setup our controllers and templates. We'll be using the Ember and Node application that we created in the last post as a starting point.

$ ember install addon ember-bootstrap
$ ember g template quote/edit
$ ember g controller quote/edit

Router

Let's add in the edit route for our quotes.

// app/router.js
...
export default Router.map(function() {
  this.route('erik');
  this.resource('quote', function() {
    this.route('edit', {
        path: ":quote_id"
    });
  });
});

Above we are adding a simple resource route that displays all quotes. The edit route will display individual quotes.

We'll need to update the quote template.

// app/templates/quote.hbs


<div class="container">
    <div class="row">
        <div class="col-md-4">
            <h1>Quotes!</h1>
            {{#each quote in model}}
            {{#link-to 'quote.edit' quote.id}}Quote: {{quote.quote}}{{/link-to}}<br/>
            Author: {{quote.author}}<br/><br/>
            {{/each}}

        </div>
            {{outlet}}
    </div>
</div>

We added in some simple bootstrap and we've now made each quote a link to our new edit template. You'll notice the outlet at the bottom. This is where our edit template will be displayed.

Here is our edit template


// app/templates/quote/edit.hbs

<div class="col-md-4">
    <h2> Edit Quote</h2>
    <form {{action 'save' on="submit"}}>
        <dl>
            <dt><p>Quote:</p> {{textarea value=model.quote cols="40" rows="1"}}</dt>
            <dt><p>Author:</p> {{textarea value=model.author cols="20" rows="1"}}</dt>
        </dl>
        <div class="row">
            <button type="submit" class="btn btn-primary">Done</button>
            <button type="delete" class="btn btn-primary" {{action 'del' on='click'}}>Destroy</button>
        </div>
    </form>

</div>

In the edit template we show the quote and the author in a text area. We then give options to submit and delete. Both are linked to different actions. The save action will fire on submit and the del action will fire when the delete button is pressed.

We need to link those actions up in our edit controller.

// app/controllers/quote/edit.js
import Ember from 'ember';

export default Ember.Controller.extend({
    actions: {
        save: function() {
            var d = this.get('model');
            d.save();
            this.transitionToRoute('quote');
            },
        del: function() {
            this.get('model').deleteRecord();
            this.transitionToRoute('quote');
            this.get('model').save();

        }
    }
});

Save action saves the model. The del action deletes it. Keep in mind that Ember Data will send a PUT request on the save, and a DELETE http request on a delete. Now since we have this in place let's see if we can add those http requests to our node server.

Node Server Update

We'll need to add two new module exports. One to delete a quote and one to update a quote.

// app/routes.js
...
        router.route('/quotes/:quote_id')
            .put(function(req, res) { quotes.updateQuote(req, res, req.params.quote_id) })
            .delete(function(req, res) { quotes.deleteQuote(req, res, req.params.quote_id) });
            
...

This tells Express to route quotes/quote_id on PUT requests to updateQuote and DELETE requests to deleteQuote. The :quote_id is a param added to the route retrieved from req.params. We pass that same parameter to the module.

// api/quote.js
...

module.exports.updateQuote = function(req, res, id) {
        Quote.findByIdAndUpdate(id, {$set: req.body.quote}, function(err, quote) {
            if (err) {
                res.send(err);
            };
            res.json({quote: quote});
        });
};

module.exports.deleteQuote = function(req, res, id) {
        Quote.findByIdAndRemove(id, function(err, quote) {
           if (err) {
                res.send(err);
           }
            res.json({quote: quote});
        });
};

...

These two modules are our methods of deleting and editing the quote. The findByIdAndUpdate and findByIdAndRemove our both methods in the Mongoose API.

Running It

That should be it. We can now run both the Ember server and the node server and see if everything works OK.

$ node server.js
$ cd TestProject
$ ember server --proxy http://127.0.0.1:3000

We should be able to bring up http://localhost:4200/quote and see all the quotes listed. If we click on any of them we'll be able to edit it or delete it. To add more quotes we'll need to use CURL or POSTMAN like we did in our previous post.

Once we know everything is OK we can compile again into our public folder.

$ ember build --environment=production --output-path=../public/

Future

In a future post we'll discuss adding quotes and relationships. If you have any questions feel free to add a comment below!

Image Credit aaronovadia

How To Edit Or Delete Records With Mongo And Ember