捕获错误时,createRecord会创建一个空实例

时间:2016-04-16 17:15:36

标签: javascript ember.js

我想知道为什么每次我尝试保存新创建的记录时我都会得到一个空实例,但它失败了。我看到只有当我显示错误时才会在我的帖子对象中添加空记录。 此外,我尝试排序帖子,让我看到最近最新创建的帖子,但行为有点奇怪,因为一旦创建帖子,它显示在最后,然后立即到顶部。我想知道这是否正常或者是否有办法等待服务器响应并以某种淡入效果推送记录等等。谢谢。

index.hbs

<form {{action "savePost" post on="submit"}}>
  <div class="form-group {{if errors.error-content "has-error has-feedback"}}">
    {{textarea value=post
      rows=3
      placeholder="What are you thinking?" 
      id="content" 
      class="form-control"}}
    <small class="help-block text-danger">
      {{errors.error-content}}
    </small>
  </div>
  <div class="clearfix">
    <div class="pull-right">
      <button type="submit" 
              class="btn btn-sm btn-success">
              Create new post
      </button>
    </div>
  </div>
</form>

{{#each sortedPosts as |post|}}
  <article class="wrapper">
    <p>{{post.content}}</p>
  </article>
{{else}}
  <article class="wrapper">
    <p>NO CURRENT POSTS TO SHOW!</p>
  </article>
{{/each}}

post.js

export default DS.Model.extend({
  content: DS.attr('string'),
  created_at: DS.attr('date')
});

index.js route

export default Ember.Route.extend(AuthenticatedRouteMixin, {
  model() {
    return this.store.findAll('post');
  },

  actions: {
    savePost(content) {
      const newPost = this.store.createRecord('post', {
        content: content
      });
      newPost.save().then(() => {
        this.controller.set('post', '');
        this.controller.set('errors', []);
      }).catch((resp) => {
        let errors = {};
        resp.errors.forEach((error) => {
         errors[`error-${error.field}`] = error.messages[0];
        });
        this.controller.set('errors', errors);
      });
    },

    willTransition() {
      this.controller.get('post').rollbackAttributes();
      this.controller.set('errors', []);
    }
  }
});

index.js控制器

export default Ember.Controller.extend({
  sortProp: ['created_at:desc'],
  sortedPosts: Ember.computed.sort('model', 'sortProp')
});

1 个答案:

答案 0 :(得分:1)

嗯,您的this.store.createRecord将始终创建新记录。因此,如果您的.save()失败,您可以卸载记录,或者不在那里创建新记录,或者将其保存到下一个.save()

问题是您的.save()失败的原因。如果它有某种验证错误,并且用户修复了它们并再次保存帖子,我建议再次使用相同的,先前创建的帖子,修改它并再次尝试.save()

另一种方法是过滤您在isNew标志上显示的记录。

有了这个,我会将textarea直接绑定到一个新记录。像这样的计算属性可能很好:

newRecord: Ember.computed('_newRecord.isNew', {
    get() {
        if(!get(this, '_newRecord') || !get(this, '_newRecord.isNew')) {
            set(this, '_newRecord', this.store.createRecord('post'));
        }
        return get(this, '_newRecord');
    }
})

然后,您可以在行动中直接将texturea的{​​{1}} value newRecord.content.save()绑定。

对于所有类型的动画,请结帐liquid fire