reset emberjs model in form

Question

I have a route that displays a list of posts and also a form for creating a new post.

posts_route.js.coffee:

Fortchan12.PostsRoute = Ember.Route.extend                                                                                   
  model: ->                                                                                                                   
    Ember.RSVP.hash                                                                                                       
      posts: @get('store').findAll 'post'                                                                                    
      newPost: @get('store').createRecord 'post' 

  actions:                                                                                                                 
    create: (post) ->                  
      post.setProperties                                                                                               
        name: this.controller.get('name')                                                                              
        body: this.controller.get('body')                                                                              
        photo: this.controller.get('photo')                                                                                                                                                              
      post.save()            

and here is the handlebars template:

<h2>make a new post</h2>                                                                                                   
<form {{action 'create' newPost on="submit"}}>                                                                             
  {{#if isSaving}}                                                                                                         
    <p>saving post...</p>                                                                                                  
  {{/if}}                                                                                                                  
  <p>{{input type="text" value=name}}</p>                                                                                  
  <p>{{textarea value=body}}</p>                                                                                           
  <button type="submit">Create</button>                                                                                    
</form>                                                                                                                    

<h2>posts</h2>                                                                                                             
{{#each posts}}                                                                                                            
  {{name}} says                                                                                                            
  {{body}}                                                                                                                 
  {{created_at}}                                                                                                             {{#link-to 'post' this}}                                                                                                 
    {{id}}                                                                                                                   {{/link-to}}                                                                                                             
  <br />           

This seems to work fine, but I want to clear out the form after it is submitted and saved so I can make another post. I can do this in the create action in the route to clear out the form (although it doesn't seem to clear out the file input field):

    self.controller.setProperties({name: '', body: '', photo: ''})                                                     

but that doesn't seem to 'reset' the model, when I submit the form again its trying to PUT to /posts/:id, instead of POST to /posts:

PUT http://0.0.0.0:3000/posts/70 404 (Not Found) 

I'm not exactly sure what I am supposed to do, I've read that using setupController is an option but I'm not sure how to do that with using multiple models in my route like I am.

Answer 1

You'll want to create a new record as well, the page still has a reference to the other record, which you saved, and now that record has an id, which is why its trying to update that record (excuse the javascript).

actions:                                                                                                                 
 create: (post) ->         
  self = @                                                                                                                                                           
  post.save().then(function(){
    self.set('controller.newPost', self.get('store').createRecord('post'));
  });   

Psuedo code mix for using all

model: function(){
  return Ember.RSVP.hash({                                                                                                       
      posts: @get('store').findAll 'post',                                                                                  
      newPost: @get('store').createRecord 'post'
  }); 
},
setupController: function(controller, model){
  controller.set('posts', this.get('store').all('post'));
  controller.set('newPost', model.newPost);
}

reversed computed property

on the controller

reverseProperty: function(){
   this.get('posts').sortBy('foo').toArray().reverse();
}.property('posts.[]')

Answer 2

Have you tried resetting the model like this?

@controller.set('content', @get('store').createRecord('post'))