In our last post we discussed creating a one-to-many relationship using Ember and Sails.js. In that post I went over how to create a post using Postman and then display it in Ember using the Ember-data REST adapter.

What if we wanted to create those posts using Ember instead of Postman? We'll be taking a look at this today.

Ember Setup

To setup Ember please check out this first post. This will go over the basics of creating our Sails.js server and setting up Ember. To add a new post let's add a new route.

$ ember g route addpost

This will create the template and route we need to continue on.

Let's go ahead and add a very simple template.

// app/templates/addpost.hbs
        <h1>New Post</h1>

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

        <dl>
        <dt>Title:<br> {{textarea value=model.name cols="80" rows="1"}}</dt>
        <dt>Creator:<br> {{textarea value=model.creator cols="10" rows="1"}}</dt>
        <dt>Content:<br> {{textarea value=model.content cols="80" rows="6"}}</dt>
        </dl>
        <button type="submit" >Add</button>
        </form>

We are using the internal Ember text area class to create text areas. On submit a save model will be triggered and the model will be passed to it.

There has been much talk in the community about the future of controllers. It is believed that at some point in the future they will almost be certainly deprecated. For this example we'll forgo using them all together and use only routes instead.

// app/routes/addpost.js
import Ember from 'ember';

export default Ember.Route.extend({
    model: function() {
        return [];
    },
    actions: {
        save: function(params) {
            var _this = this;
            var post = this.store.createRecord('post', {
               name:params.name,
               date:new Date(),
               creator:params.creator,
               content:params.content
            });
            post.save().then(function() {

            _this.transitionTo('post');
            });
        }
    }
});

First we are defining an empty array for our model. Of course we could retrieve the 'post' store and return all of them. It's not really needed so I just returned an empty array.

Next is the actions. The save action has one parameter called params. This parameter is the model that we passed in from our template. Remember {{action 'save' model on="submit"}} ? The Ember text area saved all the values to the model which was passed to the save action as model. In the save action we called it params so we can now access the object. This is one way you can pass information from your template to your route.

Since we have everything we need we can simply create a new 'post' record and set all the values. Then we save it. The .then is a promise, we don't trasition until it completes. FYI inside a promise we can't access this, so we must use _this to transitionTo somewhere else.

Sails.js

Nothing really needed here. Everything is already setup, and we'll leave everything as is. The blueprints that are already setup will allow for adding a post.

Test

Now that we have everything setup we simply need to go to http://localhost:4200/addpost. And try to add a post. It should redirect afterwards to the list of all the posts and the new post should be seen.

Final Thoughts

So we are now able to add new posts and display them on our page! Woot! That's not very exciting though. What about deleting or editing? What about more associations? Stay tuned we'll go over that in the next few blog posts.

Have any questions? Leave a comment below.

Image Credit TRoundUp