Collection Select with Ember.js & Rails API
Searching for Ember help has been tough, so I feel the need to share my struggles and add to the resources available. Between the docs, a blog, and some Stack Overflows, I finally got it working.
I’ve done several forms in Rails and collection select was no big deal. You just follow the pattern and everything works. What I would’ve given for a little User.all in my handlebars today!
Back Story
I have a blog app using Ember and a Rails API that I’ve built. I seeded my API database so I have posts, which belong to a user, and related comments (which also belong to a user). This allowed me to set up the Ember side without worrying about create, update, or destroy actions. Just the simple stuff of index and show. Mission achieved. But now I want to create a new post and have a user associated with it. No one wants a post with a user_id of null. Boring.
The Quest Begins
I started with the Ember docs and was able to basically hardcode my user objects within an array in my controller, but that’s not sustainable. I knew I needed to ask the store to find all my users and to get that done when the page loaded, but I couldn’t get it to work. I tried asking the store within the controller. I tried setting my model to get my users in the route. You name it, I probably tried it. Sometimes I wish my computer would save each failing attempt so after I finally solve it I could see how close or far off my attempts were.
Here’s the template for a new comment. The syntax for the select comes mostly from the docs and I also found the prompt part around on the internets.
I hung out on Stack Overflow and then I finally dug up this blog post. This was the missing piece at last! In my route file, I needed to use a setupController function which sets two things up for my controller: the model and users. This is where I finally ask the store to find all my user objects and return them to me so they are available in my template!
Success!
This did produce the drop down list for me, but user_id still wasn’t getting saved and I got a big old null in my face. I was even able to get the user_id out on the console from newComment action, but still null in the database (at this point I already set my Rails controller up to accept new comments).
But, Wait— There’s More!
In Rails, I simply needed to have my associations done correctly and then save the related id. In Ember not so much. I already knew I had my associations done correctly from my seeded data, so that wasn’t the problem. Apparently in Ember you need to give Ember the whole related object, not just its id in order for the store to save. How do you get the entire user object? You bet- you ask the store!
The amount of binding this’s started to get out of hand, so I created a variable to point to the controller. I also created a variable for body and set it equal to content of the body on the template. Now the magic starts to happen. The long and short of the top half is that I asked the store for the post and user objects based on the template and then to create a record in the store for a comment with each key equaling its content.
Next the code will save the comment. Then it will transition back to the post page and display a flash message of success. Finally the controller will reset bodyCopy back to empty.
Whew! It finally works! Then of course I implemented this on for new posts as well. And yes the functionality of it is a bit strange because actually you’d want to have users log in and then whatever they write a comment or post that it is associated with them. However right now, I don’t know how to do that and this at least solves my problem of null user_ids.
