This is an ongoing series of posts where I cover how to create a Node/Express/Mongo back-end with an Ember front end. We've already created a REST serverinterface in a previous post then we added in Mongo and finally we added in an edit and delete quote feature.

With all that said we still can't add a new quote yet. We'll be looking into that today. As always I've been updating the Node server code and the Ember application code on Github. You can use this to help follow along.

Node Server Setup

The good thing is that we already have the http POST module already created in our Express server (check back the previous blog posts if you want to learn more about this). If you remember we used CURL and Postman to add new quotes to our database. The api/quote.js file should have the addQuote module in it.

// api/quote.js
...

module.exports.addQuote = function(req,res) {
    var quote = new Quote(req.body.quote);
    quote.save(function(err) {
        if (err) {
            res.send(err);

        }
        res.json({quote: quote});
    });
};

This will simply save our json data into our database. The route should have this post function in it already as well.

// app/routes.js

...

        router.route('/quotes').post(function(req, res) { quotes.addQuote(req,res); })
                              .get(function(req,res) { quotes.getAllQuotes(req,res) });

The addQuote will get triggered when visiting the /quotes post route. This should be it on the Node server side. Everything is already in place to move onto the front-end.

Ember

Since we already have everything in the Node server in place all we need to do is add a way to add quotes. By default Ember data is using the REST adapter so it knows to send a POST message to the server when you save the model. Let's begin by creating a new template and controller.

$ ember g template quote/new
$ ember g controller quote/new

Now we'll add this new route to our router file

...

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

We can access this new route via /posts/new. Next up is the template!

// quote/new.hbs

<div class="col-md-4">
        <h1>New Quote</h1>

        <form {{action 'save' on="submit"}}>

        <dl>
        <dt>Quote:<br> {{textarea value=quote cols="80" rows="1"}}</dt>
        <dt>Author<br> {{textarea value=author cols="80" rows="6"}}</dt>
        </dl>
        <button type="submit" class="btn btn-primary">Add</button>
        </form>
</div>

We are using the textarea again and setting the value for the quote and author. There is a new action save this needs to be added to our controller so the model can be saved.

import Ember from 'ember';

export default Ember.Controller.extend({
actions: {
        save: function() {
                var quote = this.get('quote');
                var author= this.get('author');
                var quote = this.store.createRecord('quote', {
                        author:author,
                        quote:quote
                });
                this.set('quote','');
                this.set('author','');
                quote.save();
                this.transitionToRoute('quote');

        }
}
});

Here we are creating a new quote record. Then we clear the values and save it. Last we transition back to the route. As I mentioned before this will send a http POST message to the server in JSON. Since we already set everything up in our Node server this should work.

Running It

Just like last time we can check to see if it works.

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

If all goes well it should look something like this.

Then we can build!

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

Future

We can now add,edit and delete our quotes. We still have more work to do! In future posts we'll add more models and relationships.

Questions? Tweet me and let me know!

Image Credit Darcxed.files.wordpress