EmberJS：如何重置子组件中的表单字段内容

看起来你在开发Ember表单组件时遇到了动态生成字段和硬编码字段同步重置的需求，我来给你一步步拆解解决方案：

核心思路 #

因为Ember基于数据绑定机制，所以重置的关键是恢复动态字段的初始状态，同时重置硬编码字段的值，利用双向绑定自动同步更新视图。

步骤1：保存动态字段的初始值 #

首先，你需要在父组件中保存fields数组的初始状态，而且必须是深拷贝，避免后续修改操作污染原始的初始数据。在父组件的JS文件中：

// 父组件的JavaScript文件
import Component from '@ember/component';
import { copy } from '@ember/object/internals'; // Ember内置的深拷贝方法

export default class ParentFormComponent extends Component {
  init() {
    super.init(...arguments);
    // 深拷贝初始fields数组，确保后续修改不会影响原始初始数据
    this.initialFields = copy(this.fields, true);
  }
}

如果你的项目中不方便使用Ember的copy方法，也可以用JSON.parse(JSON.stringify(this.fields))实现深拷贝（注意：这种方式不支持函数、Symbol等特殊类型，如果你的fields里没有这类数据就可以放心用）。

步骤2：编写全局重置方法 #

在父组件中添加一个重置方法，同时处理硬编码字段和动态字段的重置逻辑：

// 继续在父组件的JS文件中添加
resetForm() {
  // 重置硬编码字段，这里替换成你实际的硬编码字段名
  this.set('name', '');
  this.set('email', '');
  // ...添加其他需要重置的硬编码字段

  // 重置动态字段：用初始值的深拷贝替换当前fields数组
  this.set('fields', copy(this.initialFields, true));
}

步骤3：绑定重置按钮的点击事件 #

接下来把重置方法绑定到按钮上，分两种场景处理：

场景1：按钮在父组件中

父组件模板可以这样写：

{{#custom-form fields=fields}}
  <!-- 硬编码字段示例 -->
  {{input value=name placeholder="姓名"}}
  {{input value=email placeholder="邮箱"}}

  <!-- 重置按钮 -->
  <button {{action 'resetForm'}}>重置表单</button>
{{/custom-form}}

场景2：按钮在子组件（custom-form）中

如果按钮是子组件的一部分，需要把重置方法通过action传递给子组件：

父组件模板：

{{#custom-form fields=fields resetAction=(action 'resetForm')}}
  <!-- 硬编码字段 -->
  {{input value=name placeholder="姓名"}}
{{/custom-form}}

子组件模板：

{{#each fields as |field|}}
  {{input value=field.value placeholder=field.name}}
{{/each}}

<!-- 子组件内的重置按钮，触发父组件传来的action -->
<button {{action resetAction}}>重置表单</button>

为什么这样可行？ #

Ember的双向绑定会自动监听fields数组的变化，当你用初始值的副本替换当前fields时，子组件的{{each}}循环会重新渲染所有动态输入框，输入框的value会绑定到新的field.value，从而同步重置内容。而硬编码字段通过this.set直接重置值，同样会通过绑定更新视图。

注意事项 #

• 如果你从外部（比如路由或上层组件）传入fields，建议把初始值的保存逻辑放在最上层组件中，避免因为引用传递导致的意外修改。
• 如果你的fields包含复杂对象（比如带有函数或Ember数据模型），优先使用Ember的copy方法而非JSON序列化，避免丢失特殊类型的数据。

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