【问题标题】:reset emberjs model in form在表单中重置 emberjs 模型
【发布时间】:2014-06-06 05:11:46
【问题描述】:

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

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

这是车把模板:

<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 是一种选择,但我不确定如何像我一样在我的路线中使用多个模型来做到这一点。

【问题讨论】:

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


    【解决方案1】:

    您还需要创建一条新记录,该页面仍然具有对您保存的另一条记录的引用,并且现在该记录有一个 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);
    }
    

    逆向计算属性

    在控制器上

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

    【讨论】:

    • 谢谢,这似乎奏效了。虽然我现在可以创建一个新帖子,但由于某种原因帖子没有更新。我需要添加这样的东西吗:self.controller.set('posts', self.get('store').findAll('post'))
    • 我是否在控制器中执行此操作?
    • 这条路线是一个完全可以接受的地方。此外,您可能只使用all 过滤器而不是再次调用findAll,我举个例子
    • findAll 将再次调用服务器(您可能会觉得很酷),但 all 过滤器是实时的,也就是当您添加新记录时它会更新)。
    • 啊,他们是!但是我返回我的记录时默认范围为 updated_at DESC,所以它会将新帖子放在底部......我猜过滤器可以以某种方式进行反转或排序?
    【解决方案2】:

    你试过这样重置模型吗?

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

    【讨论】:

    • 谢谢 nik,我想这就是我想要的,除了我需要设置 'newPost' 而不是 kingpin2k 所说的 'content'
    • 我没有意识到你在路线中,你必须对控制器进行操作
    猜你喜欢
    • 1970-01-01
    • 2023-03-11
    • 2012-04-27
    • 2020-01-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-08-23
    • 1970-01-01
    相关资源
    最近更新 更多