CODEWITHSUNDEEP
javascriptember.jsember-data
commadelimited
commadelimited

Reputation: 5119

Ember.js: Save record to Ember.Data, wait for response before displaying

I'm building an app which allows users to post to Twitter. When they click the submit button we close the posting form. We create a Message object which is saved to the data store and sent to the server. The server creates a Post object, then submits a request to Twitter. The server then updates the Post object, replies back to the UI with the updated information.

That part is already working. But I need to know if it's NOT working so that I can alert the user that their message did not go through and keep the posting form open. Here's some pertinent information about my app.

Social.Message = DS.Model.extend({
    text: DS.attr("string"),
    created: DS.attr("date"),
    isPending: DS.attr("boolean"),
    posts: DS.hasMany("Social.Post")
});

Social.Post = DS.Model.extend({
    text: DS.attr("string"),
    status: DS.attr("string"),
    created: DS.attr("date"),
    message: DS.belongsTo("Social.Message"),
    msgStatus: function() {
        return ((this.get('status') === 'S') ? true : false);
    }.property('status')
});

The lifecycle of a post (status) goes from P (pending) to Q (queued) to S (sent), E (error) is also a possibility, and the status that I'm really looking for. Here's the saveMessage method:

saveMessage: function(text){
    var acct = Social.Account.find(this.get("id")),
        msg = Social.store.createRecord(
                    Social.Message,
                    {
                        text: text,
                        created: new Date()
                    }
                );
    acct.get("messages").addObject(msg);
    Social.store.commit();
    Ember.run.later(this, function() {
        msg.get('posts').forEach(function(p){
            p.reload();
        });
    }, 1000);
}

You can see that I pause for a second to let the server process, then attempt to reload the Post object with the response from Twitter. Those last few lines are where I think this new code would go, but I'm not sure how to listen to something that might not come back. I'd rather not "wait" for a second, instead it would be nice if the message could just update. Not sure how to accomplish that though.

Thoughts?

Upvotes: 4

Views: 4461

Answers (2)

buuda
buuda

Reputation: 1427

You need to run your code as a callback after the record is created. This is how:

msg.one('didCreate', function() {
    // transition to new route showing data just created
});
Social.store.commit();

This will add a one time call on the record for when it is created. There are also 'didUpdate' and 'didDelete' hooks as well. You need to add these callbacks before the create is called (obviously).

I'm not sure how to handle the error condition as I haven't looked into that yet.

Edit: this is actually broken, per https://github.com/emberjs/data/issues/405, so waiting may be the only option currently.

Upvotes: 3

Toran Billups
Toran Billups

Reputation: 27399

It sounds like you don't want the two-way data binding here and you might benefit from one-way instead. Here is a great full length blog post that explains it a bit more in depth

http://www.solitr.com/blog/2012/06/ember-input-field-with-save-button/

Upvotes: 0

Related Questions