Trouble with transitionTo route after adding a new record using ember data and Parse

Question

I'm learning ember and ember data by extending the example blog app from the ember guides page, and am having some difficulty implementing a "new" route for adding new blog entries. I'm using the ember data adapter for Parse to persist the data. I have successfully connected to Parse and can query and update the records in Parse. I created a "new" route and can create a new post, but I have 2 problems:

1) My route for new posts adds the post on Parse, but won't redirect back to the post route after it has been saved. It gives me the error "Uncaught Error: assertion failed: Cannot call get with 'id' on an undefined object.". I've tried variations of transitionTo('posts.post') and other options but am stumped on how to redirect back to the post detail for the new post. Here's my PostsNewRoute:

App.PostsNewRoute = Ember.Route.extend({
    model: function() {
        return App.Post.createRecord();
    },
    events: {
        createPost: function() {
        this.get('store').commit();
        this.transitionTo('post');
        }
    }
});

2) As soon as I type in the title of a new post, it shows up in the posts list, just like the sample app. However, when I click create, it persists the record to parse, and then adds the parse record to the list too. The first post added has a null id, and the 2nd duplicate post has the post id from Parse. If I click on the 2nd duplicate post, it displays exactly what I want, the new post in the post detail view. How do I get rid of the duplicate post in the list, and how do I get the redirect to go straight to the detail of the new post? For reference, my router is below

App.Router.map(function() {
    this.resource('posts', function() {
        this.resource('post', { path: ':post_id'});
        this.route('new')
    });
    this.resource('about');
});

mehulkar mehulkar · Accepted Answer · 2013-07-22T23:36:59

You want to transition to the post route after the commit has returned from the server, I think. I'm not sure if commit returns a promise or not (I'm not on the latest version of ED)

If yes, you can use the promise's then function to transition on success.

this.get('store').commit().then(function(post) {
  this.transitionTo('posts.post', post);
});

If no, you can bind an action to the post record's id so that even it changes, i.e. comes back from the server, you can call the transition then. Assuming post is the object.

post.addObserver('id', post, '_transitionFunction')

and then:

_transitionFunction: function() {
  var post = // some handle to the post object;
  post.removeObserver('id', this, '_transitionFunction');
  this.transitionTo('posts.post, post);
}

These examples aren't entirely accurate (I usually do this in the controller, not the route, but let me know if you need any more clarification.

You can all see an implementation here.

Trouble with transitionTo route after adding a new record using ember data and Parse

1 Answers