Ember.js Textarea如何与仅定义getter的数据实现双向绑定

问题原因 #

<Textarea> 的 @value 双向绑定逻辑会尝试给绑定的属性赋值，你仅定义了 inputText 的 getter 没有可用的 setter，且 Ember 组件入参 this.args 本身是只读属性，无法直接修改，因此触发控制台报错。

解决方案1：改用单向绑定+手动取值（推荐） #

如果仅需要在失焦时提交内容，不需要实时同步输入值，可直接在触发事件时取DOM元素的输入值，无需维护内部状态：

1. 模板修改为单向传初始值：

<Textarea @value={{this.args.text}} @focusOut={{this.postRequest}} />

2. JS 回调中直接取事件目标的内容：

postRequest(event) {
  const currentInputValue = event.target.value;
  // 直接使用currentInputValue发送post请求即可
}

解决方案2：用tracked属性做中转（需要实时同步输入值时使用） #

如果输入过程中需要实时获取值做逻辑处理（比如字数统计、实时校验），可以定义内部tracked变量配套getter和setter：

1. 组件JS代码修改：

import { tracked } from '@glimmer/tracking';

export default class InputComponent extends Component {
  @tracked _innerText = this.args.text;

  get inputText() {
    return this._innerText;
  }

  set inputText(newVal) {
    this._innerText = newVal;
    // 若需要同步更新父组件状态，可在此调用父组件传入的更新回调：
    // this.args.onTextUpdate?.(newVal);
  }

  postRequest() {
    // 直接使用this.inputText即可拿到最新输入值
  }
}

2. 模板保持原有写法即可：

<Textarea @value={{this.inputText}} @focusOut={{this.postRequest}} />

之前使用 {{mut}} 或者自定义setter无效，大概率是因为setter中直接修改了只读的this.args属性，Ember不允许直接修改组件入参，必须通过父级传入的回调函数更新父级状态。

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