Emberjs - 保存后如何重置组件上的字段？答案

【问题标题】：Emberjs - how to reset a field on a component after saving?Emberjs - 保存后如何重置组件上的字段？
【发布时间】：2016-04-29 17:04:09
【问题描述】：

我在游戏中嵌入了一个名为 Comment 的对象。每个游戏可以有很多评论。

当用户（称为家长）查看游戏页面时，他们可以发表评论。

我遇到的问题是，在保存评论后，我似乎无法将评论字段的正文重置为空。

这是组件：

MyApp.AddCommentComponent = Ember.Component.extend({

  body: '',
  actions: {
    addComment: function() {

      var comment, failure, success;
      if (!!this.get('body').trim()) {
        comment = this.store.createRecord('comment', {
          body: this.get('body'),
          game: this.get('game'),
          parent_id: this.get('parent_id'),
          parent_name: this.get('parent_name')
        });

        success = (function() {
          this.set('body', '');
        });
        failure = (function() {
          return console.log("Failed to save comment");
        });
        return comment.save().then(success, failure);
      }
    }
  }
});

错误出现在“this.set”行 - this.set 不是函数

我找到的所有示例都是关于在控制器中执行此操作或通过在路由更改时创建新记录（但在我的示例中路由没有更改，因为它只是将另一个嵌入对象添加到现有页面）。

【问题讨论】：

这里提供的解决方案：stackoverflow.com/questions/35534260/… 也适用于您。但让我简要介绍一下其他选项： (1) success = function() { this.set('body', ''); }.bind(这个); (2) 成功 = ()=> { this.set('body', ''); }; (3) return comment.save().then(()=>{ this.set('body', ''); }).catch(()=>{ //log err; });

标签： ember.js ember-data ember-components

【解决方案1】：

你正在使用

this.set('body', '');

成功了，但是这里this的作用域发生了变化，你需要保持控制器作用域并将body设置为空字符串，如

MyApp.AddCommentComponent = Ember.Component.extend({

  body: '',
  actions: {
    addComment: function() {
      var that = this;
      var comment, failure, success;
      if (!!this.get('body').trim()) {
        comment = this.store.createRecord('comment', {
          body: this.get('body'),
          game: this.get('game'),
          parent_id: this.get('parent_id'),
          parent_name: this.get('parent_name')
        });

        success = (function() {
          that.set('body', '');
        });
        failure = (function() {
          return console.log("Failed to save comment");
        });
        return comment.save().then(success, failure);
      }
    }
  }
});

【讨论】：

谢谢你，解决了！我明白为什么，所以感谢您解释范围问题。

【解决方案2】：

当您引入function 时，您必须记住this 的值与this 的封闭范围的值不同（不一定）相同。保存对 Component 的引用以在闭包中使用，如下所示：

MyApp.AddCommentComponent = Ember.Component.extend({

  body: '',
  actions: {
    addComment: function() {

      var comment, failure, success;
      var self= this;

      if (!!this.get('body').trim()) {
        comment = this.store.createRecord('comment', {
          body: this.get('body'),
          game: this.get('game'),
          parent_id: this.get('parent_id'),
          parent_name: this.get('parent_name')
        });

        success = (function() {
          self.set('body', '');
        });
        failure = (function() {
          return console.log("Failed to save comment");
        });
        return comment.save().then(success, failure);
      }
    }
  }
});

【讨论】：