成功执行Ajax POST后更新Ember Data Store的问题

解决方案 #

这是JavaScript上下文绑定的典型问题，在Ember场景下有几种简单可靠的解决方式：

方法1：使用jQuery Ajax的context参数

jQuery的Ajax方法内置了context选项，你可以直接将组件实例传入，这样回调函数里的this就会指向组件：

$.ajax({
  contentType: "application/json",
  method: "POST",
  data: JSON.stringify(data),
  processData: false,
  url: url,
  context: this, // 关键：指定上下文为组件实例
  success: this.actions.update,
  beforeSend: function() { },
  error: function() { }
});

修改后你的update方法里的this就能正确指向组件，this.get('store')自然就能正常工作了。

方法2：用箭头函数包裹回调

箭头函数会继承外层作用域的上下文，你可以把success回调换成箭头函数，在里面调用你的update方法：

$.ajax({
  contentType: "application/json",
  method: "POST",
  data: JSON.stringify(data),
  processData: false,
  url: url,
  success: (responseData) => this.actions.update.call(this, responseData),
  beforeSend: function() { },
  error: function() { }
});

这里用call(this)确保update方法内部的this也是组件实例，或者如果你的update方法本身是用箭头函数定义的，直接调用即可。

方法3：提前保存上下文到变量

在发起Ajax请求前，把组件的this存到一个变量中，然后在回调里使用这个变量：

const component = this;
$.ajax({
  contentType: "application/json",
  method: "POST",
  data: JSON.stringify(data),
  processData: false,
  url: url,
  success: function(data) {
    component.actions.update.call(component, data);
  },
  beforeSend: function() { },
  error: function() { }
});

额外推荐：使用Ember风格的Promise处理

其实在Ember中，更推荐利用Ember.$.ajax返回的Promise结合箭头函数，代码会更简洁直观，同时避免上下文问题：

Ember.$.ajax({
  contentType: "application/json",
  method: "POST",
  data: JSON.stringify(data),
  processData: false,
  url: url
}).then((data) => {
  this.get('store').pushPayload({
    item: {
      id: data.item.id,
      title: data.item.title,
      images: data.images
    }
  });
}).catch((error) => {
  // 这里可以添加错误处理逻辑
  console.error('请求失败:', error);
});

这种方式不需要单独定义update action，直接在then回调里完成Store更新，箭头函数自动绑定了组件的上下文，非常省心。

内容的提问来源于stack exchange，提问作者Bitwise