How to clear a new record from ember.js frontend after it fails Rails validation (422 error)?

Question

I'm working on a basic reddit clone app with Rails and ember.js (via the ember-rails gem). Basically I have a 'post' model/controller in Rails which works correctly, but when I add a new post from the ember post model's create action, even if it fails the Rails validation, if I then go to the 'posts' index page which lists all the posts, I can see it there (ie ember is keeping the data). When I refresh it goes away, but I'm wondering what is the best way to purge that data so that it gets deleted upon rejection from the backend? Another odd thing is that simply going to the posts/new page at all creates a new blank post which is then visible on the Then on the client-side, I have the following files in app/assets/javascripts/routes:

posts_route.js :

RedditJp.PostsRoute = Ember.Route.extend({

  model: function() {
      return this.get('store').find('post');
  }
});

posts_new_route.js:

RedditJp.PostsNewRoute = Ember.Route.extend({

  model: function(){
    return this.get('store').createRecord('post'); },

  actions: {
    create: function() {
      var newPost = this.get('currentModel');
      var self = this;
      newPost.save().then(
        function() {  self.transitionTo('posts'); },
        function() { }
        );
    }
  }
});

Here's the form I'm trying to use to submit the data in posts/new.hbs:

<h1> Add a post </h1>
{{#each error in errors.title}}
  <p>{{error.message}}</p>
{{/each}}

<form {{action "create" on="submit"}}>
  <div>
    <label>
      Title<br/>
      {{input type="text" value=title}}
    </label>
  </div>
  <div>
    <label>
      Address<br/>
      {{input type="text" value=address}}
    </label>
  </div>
  <div>
    <label>
      Vote count<br/>
      {{input type="text" value=voteCount}}
    </label>
  </div>
  <button>Save</button>
</form>

and then in assets/javascripts/templates/posts/ I have index.hbs:

<h1>Posts</h1>
<ul>
  {{#each}}
      <li>{{title}} at {{address}} vote count: {{voteCount}}</li>
  {{else}}
      <li>There are no posts.</li>
  {{/each}}
</ul>

and here's my router.js:

RedditJp.Router.map(function() {
  this.resource('posts', function() {
    this.route('new')
    });

  this.resource('home', function() {
    });

});

RedditJp.IndexRoute = Ember.Route.extend({
  redirect: function(){
    this.transitionTo('home')
    }
  });

I was thinking I could just add a check in the posts/index.hbs file and only show records that aren't dirty, but there must be a cleaner way of doing it, so I'm wondering what would be considered best practice in this case (I'm thinking there should be some code I could add to the promise in posts_new_route.js to deal with this, but I can't quite figure it out).

Thanks a lot! And let me know if you need any additional info.

Answer 1

You can check if model isNew in template to hide new Record ( also you can use isEmpty property )

    var record = store.createRecord('model');
record.get('isNew'); // true

record.save().then(function(model) {
  model.get('isNew'); // false
});

In template will look like {{each model}} {{#if model.get('isNew')}}

record.save().then(function(){ // Success callback }, function() { model..deleteRecord(); });