ember.js - unable to commit form data - ember.js

Question

I'm relatively new to ember.js and still having a painful time learning it. I am using the ember-rails gem, and Rails as a JSON API.
First I just wanted to build something that would display a list of records (in this case, emails) with the ability to add new ones. I have the UI setup and functioning, and ember is pulling the list of emails from the Rails API. I can click an email title and it takes me to the full email etc.
My problem is adding new records. I have a Compose Email form set up, but I still have not managed to add a new record, after several days of re-arranging code in routers and controllers. Every example I have found seems to suggest a different way of juggling transactions, createRecords, .get('store'), .get('content') and then committing the details through an action of some sort. None of them have worked for me. Here's what feels like the closest I've got:
Store
App.Adapter = DS.RESTAdapter.extend
serializer: DS.RESTSerializer.extend
primaryKey: (type) -> '_id'
App.Store = DS.Store.extend
revision: 11
adapter: 'App.Adapter'
Email model
App.Email = DS.Model.extend
from: DS.attr('string')
to: DS.attr('string')
subject: DS.attr('string')
body: DS.attr('string')
created_at: DS.attr('string')
Compose Route
App.ComposeRoute = Ember.Route.extend
model: () ->
transaction = this.get('store').transaction()
email = transaction.createRecord(App.Email, {})
return email
events: {
save: (email) ->
email.get('store').transaction()
}
Compose Template (trimmed of some HTML)
<label class="control-label" for="to">To</label>
{{view Ember.TextField valueBinding="to" id="to" placeholder="Your friend" required="true"}}
<label class="control-label" for="subject">Subject</label>
{{view Ember.TextField valueBinding="subject" id="subject" placeholder="What's it about?" required="true"}}
<label class="control-label" for="notes">Your message</label>
{{view Ember.TextArea valueBinding="body" id="body" placeholder="Your message"}}
<button class="btn btn-primary btn-large" {{action save this}}>Send email</button>
Rails emails_controller.rb
class EmailsController < ApplicationController
# GET /emails.json
def index
render json: Email.all
end
# GET /emails/1.json
def show
email = Email.find(params[:id])
render json: email
end
# POST /emails.json
def create
email = Email.new(params[:email])
email.save
render json: email, status: :created
end
So with the above code I fill in the textboxes, click the submit button, and nothing seems to happen. However, if I go back to my Inbox page I can see the record I just added (woohoo!) but it's not persisted through Rails (hrmmm) - as soon as I refresh it's gone. Looking at the Rails logs, ember doesn't seem to be sending Rails anything.
I feel like I am going around in circles just trying different lines from various blog posts without really understanding the basic process. How should I be doing this? I've read through the Ember docs and while they explain the basic concepts, there are very few working examples using the RESTAdapter.

Answer 1

You never called commit anywhere in your code. Keep in mind that store.transaction() only gives you an instance of transaction, but you still have to commit (or rollback in Route#deactivate, if the user leaves that route). You might want to do your Route somewhat like this:
App.ComposeRoute = Ember.Route.extend
model: ->
transaction = this.get('store').transaction()
transaction.createRecord(App.Email, {})
deactivate: ->
## not super sure about modelFor in this case, but I think it should work
record = #modelFor('email')
## There's more to check here, like is record 'inflight' and all
## but you get the idea.
if ((record.get('isNew')) or (record.get('isDirty')))
#get('store.defaultTransaction').rollback()
events: {
save: (email) ->
#get('store.defaultTransaction').commit()
## or #get('store').commit()
}

Answer 2

The way you save your record is still not correct.
You create a new transaction for your email, it is this transaction you want to commit, not the store's one.
App.ComposeRoute = Ember.Route.extend
model: () ->
transaction = this.get('store').transaction()
email = transaction.createRecord(App.Email, {})
return email
events: {
save: (email) ->
// email.get('store').transaction() //This is only creating a new transaction
// #get('store.defaultTransaction').commit() // this is committing the store's transaction
email.get('transaction').commit()
}