如何在Ember 4.12控制器中操作DOM并联动输入与按钮属性

在Ember.js中推荐遵循数据驱动视图的设计思路，不要直接操作DOM元素，而是通过响应式属性绑定来实现需求，以下是具体实现方案：

修正后的控制器代码（test.js） #

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class TestController extends Controller {
  // 定义响应式属性存储输入框的值
  @tracked inputValue = 'somevalue';

  @action
  updateValue(event) {
    // 从事件对象中获取输入框当前值，更新到响应式属性
    this.inputValue = event.target.value;
  }
}

修正后的模板代码（test.hbs） #

<!-- 绑定输入框value到控制器的inputValue，监听input事件实时更新属性 -->
<input type="text" value={{this.inputValue}} {{on "input" this.updateValue}} />
<!-- 按钮标题直接绑定响应式属性，实现实时同步 -->
<button type="button" id="test">{{this.inputValue}}</button>

进阶：复杂按钮标题逻辑 #

如果需要根据输入值生成自定义按钮标题，可以使用计算属性：

控制器新增计算属性 #

import { computed } from '@ember/object';

// 根据输入值动态生成按钮标题
@computed('inputValue')
get buttonTitle() {
  return this.inputValue ? `当前输入：${this.inputValue}` : '请输入内容';
}

模板对应修改 #

<button type="button" id="test">{{this.buttonTitle}}</button>

核心说明 #

Ember的数据流是单向的，通过响应式属性（@tracked）和计算属性绑定视图，能避免直接操作DOM带来的状态不一致、代码难维护等问题，完全符合框架的最佳实践。

内容的提问来源于stack exchange，提问作者s.w