Ember.js中避免保存时客户端内容被服务器版本覆盖的问题

这个问题我之前在Ember项目里也碰到过，核心原因是Ember Data的默认行为导致的——当你调用model.save()后，服务器响应返回时会自动用服务器返回的数据更新模型属性。如果在请求pending的这段时间里，用户已经修改了message字段的内容，服务器返回的旧版本数据就会把用户新输入的内容覆盖掉。下面给你几个实用的解决方案：

方案1：用防抖（Debounce）延迟保存请求 #

这是最常用也最省心的方案，通过延迟触发save()方法，避免用户连续输入时产生多个pending的保存请求。只有当用户停止输入一段时间后，才会发送保存请求，从根源上解决覆盖问题，还能减少不必要的API调用。

在你的组件或控制器里可以这么写：

// 示例组件代码
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { debounce } from '@ember/runloop';

export default class MessageEditorComponent extends Component {
  @action
  handleMessageChange(event) {
    const newMessage = event.target.value;
    this.args.model.set('message', newMessage);
    
    // 延迟300ms执行保存，用户连续输入时会重置延迟计时
    debounce(this, this.saveModel, 300);
  }

  saveModel() {
    this.args.model.save().catch(error => {
      // 这里可以添加错误处理逻辑，比如给用户提示
      console.error('消息保存失败:', error);
    });
  }
}

你可以根据业务需求调整延迟时间（比如200ms或500ms），平衡实时性和请求频率。

方案2：强制保留客户端最新值（实时保存场景） #

如果你的业务场景要求必须实时保存，不能用防抖延迟，可以在保存前后跟踪客户端的最新值，确保保存完成后不会被服务器的旧数据覆盖：

import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class MessageEditorComponent extends Component {
  @action
  async handleMessageChange(event) {
    const newMessage = event.target.value;
    this.args.model.set('message', newMessage);
    
    // 记录当前输入的最新值
    const clientSideMessage = newMessage;

    try {
      await this.args.model.save();
      // 保存完成后，检查模型当前值是否和记录的客户端值一致
      // 如果不一致，说明用户在保存期间又输入了新内容，强制设置为客户端最新值
      if (this.args.model.message !== clientSideMessage) {
        this.args.model.set('message', clientSideMessage);
      }
    } catch (error) {
      console.error('消息保存失败:', error);
      // 可选：保存失败时可以回滚到客户端最新值
      this.args.model.set('message', clientSideMessage);
    }
  }
}

注意：这个方案会忽略服务器对message字段的任何修改（比如服务器端的格式化处理），完全以客户端输入为准，你需要根据业务需求权衡是否使用。

方案3：自定义适配器行为（进阶） #

如果你想从底层修改Ember Data的合并逻辑，可以自定义适配器的updateRecord方法，让它在处理服务器响应时优先保留客户端的属性值。不过这个方案相对复杂，适合有一定Ember Data底层经验的开发者：

// app/adapters/your-model.js
import JSONAPIAdapter from '@ember-data/adapter/json-api';

export default class YourModelAdapter extends JSONAPIAdapter {
  updateRecord(store, type, snapshot) {
    return super.updateRecord(store, type, snapshot).then(response => {
      // 这里可以修改响应数据，比如用客户端当前的message值替换服务器返回的值
      const clientMessage = snapshot.record.get('message');
      response.data.attributes.message = clientMessage;
      return response;
    });
  }
}

这样服务器返回的响应会被替换成客户端的最新值，Ember Data合并时就不会覆盖用户的输入了。

总结一下，最推荐方案1，既解决了覆盖问题，又优化了API请求频率；如果必须实时保存，方案2是更简单的选择；方案3适合需要全局统一处理的场景。

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