1

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 (i.e. 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.

etdev
  • 524
  • 3
  • 12

1 Answers1

0

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(); });

Stakoov
  • 196
  • 5
  • Thanks for the reply! Is this generally considered the best way to deal with this issue? I was wondering if it's possible to make it automatically delete the record as soon as the Rails authentication fails. The way things are now, invalid records could still pile up on the client so I was wondering if there was a cleaner way to clear that data. – etdev Sep 11 '14 at 01:23
  • I think this is the best way to deal with this because it has a lot of corner cases. When you crate record you must define where and when to be deleted or saved. on success you transition to page or something else on error you can pass error object and display error massage from your backend and then delete the store object check this http://emberjs.com/api/data/classes/DS.Errors.html – Stakoov Sep 11 '14 at 07:46