javascript - 在表单中重置 emberjs 模型

标签 javascript ruby-on-rails forms ember.js

我有一个显示帖子列表的路线以及一个用于创建新帖子的表单。

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

这是 Handlebars 模板:

<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 />           

这似乎工作正常,但我想在提交并保存表单后清除该表单,以便我可以发表另一篇文章。我可以在路径中的创建操作中执行此操作以清除表单(尽管它似乎没有清除文件输入字段):

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

但这似乎并没有“重置”模型,当我再次提交表单时,它尝试 PUT 到/posts/:id,而不是 POST 到/posts:

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

我不太确定我应该做什么,我读过使用 setupController 是一个选项,但我不确定如何像我一样在我的 route 使用多个模型来做到这一点。

最佳答案

您还想创建一条新记录,页面仍然引用您保存的另一条记录,现在该记录有一个 ID,这就是它尝试更新该记录的原因(请原谅JavaScript)。

actions:                                                                                                                 
 create: (post) ->         
  self = @                                                                                                                                                           
  post.save().then(function(){
    self.set('controller.newPost', self.get('store').createRecord('post'));
  });   
使用所有的伪代码混合
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);
}

反转计算属性

在 Controller 上

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

关于javascript - 在表单中重置 emberjs 模型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23209235/

相关文章:

wordpress - Google Analytics 不再跟踪所有表单提交

javascript - 提交表单时,IE8 不会向请求添加除输入之外的属性

javascript - 如何使用 VueJS 在带有按钮的图片周围显示边框?

javascript - 函数返回未定义而不是 bool 值。 BST, 力扣

ruby-on-rails - ActionMailer raise_delivery_errors 在生产中应该是真还是假?

ios - NSDateFormatter for rails 4.0 created_at

ruby-on-rails - 安装在 rails 上的发动机中的 Angular

javascript - 让用户在三次尝试后继续

javascript - 如何一键打开新窗口?

javascript - 选择表单选项时创建文本字符串