Ember控制器绑定HTML字符串至模板，点击事件无法触发求助

你遇到的核心问题是：Ember不会自动解析动态插入的HTML字符串中的Handlebars语法。

当你用htmlSafe或者三重大括号输出HTML时，Ember只是把这段字符串当作普通的HTML内容插入到DOM中，不会对其中的{{action "newAlert"}}进行模板编译——这个Handlebars语法只有在模板文件（.hbs）在构建阶段被编译时才会被处理，转化为对应的事件绑定逻辑。动态生成的HTML跳过了这个编译步骤，所以按钮上的{{action}}完全是无效的，自然不会触发对应的动作。

这里有几个靠谱的解决思路，你可以根据场景选择：

1. 使用Ember组件（推荐） #

这是最符合Ember最佳实践的方式。把动态内容拆成组件，而不是拼接HTML字符串：

首先创建一个组件alert-button.js：

import Component from '@ember/component';

export default Component.extend({
  actions: {
    newAlert() {
      alert('Hello');
    }
  }
});

对应的组件模板alert-button.hbs：

<button {{action "newAlert"}}>Test Alert</button>

然后在你的控制器模板hello.hbs中直接使用组件：

{{alert-button}}

如果你的动态内容更复杂，需要根据条件生成不同的组件，也可以用{{component}}辅助函数动态渲染组件，灵活性很高。

2. 手动绑定DOM事件 #

如果一定要用动态HTML的方式，你可以在HTML插入后手动获取DOM元素，然后绑定事件：

修改控制器的代码：

import { htmlSafe } from '@ember/string';
import { computed } from '@ember/object';
import { later } from '@ember/runloop';

export default Controller.extend({
  htmlString: computed(function() {
    return htmlSafe('<button class="alert-button">Test Alert</button>');
  }),

  init() {
    this._super(...arguments);
    later(() => {
      // 确保DOM已经渲染完成
      const button = document.querySelector('.alert-button');
      if (button) {
        button.addEventListener('click', () => this.send('newAlert'));
      }
    });
  },

  actions: {
    newAlert() {
      alert('Hello');
    }
  }
});

注意这里用了later确保DOM已经插入完成，另外如果是在组件里，更推荐用didInsertElement钩子，比直接操作全局DOM更安全。

3. 使用Ember的模板渲染服务（高级场景） #

如果你的动态内容是完整的Handlebars模板字符串，可以用Ember的模板渲染相关API来编译渲染，但这种方式相对复杂，一般只有在非常特殊的场景下才需要使用，比如动态加载外部模板。

优先推荐用组件的方式，这符合Ember的数据驱动和组件化设计理念，代码更易维护、更安全，也能避免手动操作DOM带来的潜在问题。

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