如何在Ember的hbs模板中编程式调用控制器动作自动显示模态框？

方法一：利用控制器的生命周期钩子或属性监听 #

如果你希望逻辑完全留在控制器里，可以通过生命周期钩子或者属性监听来检测模型条件，自动触发模态框动作。

场景1：模型是同步加载的 #

如果模型在控制器初始化时就已经就绪，可以直接在init钩子中检查条件并触发：

// app/controllers/your-controller.js
import Controller from '@ember/controller';
import { action } from '@ember/object';

export default class YourController extends Controller {
  init() {
    super.init(...arguments);
    this._checkAndShowModal();
  }

  @action
  _checkAndShowModal() {
    // 这里替换成你的模型条件判断
    if (this.model.shouldDisplayModal) {
      this.send('showModal'); // 调用你已定义的显示模态框动作
    }
  }

  // 你已有的模态框触发动作
  @action
  showModal() {
    // 你的模态框显示逻辑（比如调用模态框组件的show方法）
  }
}

场景2：模型是异步加载的 #

如果模型是异步获取的（比如通过findRecord），init钩子执行时模型可能还没加载完成，这时候可以用属性监听或者Octane的tracked属性来监听模型变化：

// app/controllers/your-controller.js（Ember Octane+版本）
import Controller from '@ember/controller';
import { action, tracked } from '@ember/object';
import { cached } from '@ember/object';

export default class YourController extends Controller {
  @tracked model;

  // 缓存模型条件判断结果，避免重复计算
  @cached
  get shouldTriggerModal() {
    return this.model?.shouldDisplayModal;
  }

  // 在视图渲染完成后检查条件（确保模态框DOM已就绪）
  @action
  didRender() {
    if (this.shouldTriggerModal) {
      this.showModal();
    }
  }

  @action
  showModal() {
    // 你的模态框显示逻辑
  }
}

方法二：在路由的setupController钩子中触发 #

路由的setupController方法会在模型加载完成后执行，这是个非常合适的时机来触发控制器动作——因为此时你能确保模型已经完全就绪：

// app/routes/your-route.js
import Route from '@ember/routing/route';

export default class YourRoute extends Route {
  setupController(controller, model) {
    super.setupController(controller, model);
    
    // 检查模型条件，满足则调用控制器的模态框动作
    if (model.shouldDisplayModal) {
      controller.send('showModal');
    }
  }
}

注意事项：避免重复触发 #

如果用户刷新页面或者切换路由后返回，可能会重复触发模态框。你可以在控制器里加个标记来避免这种情况：

// 在控制器中添加标记
@tracked hasModalShown = false;

@action
_checkAndShowModal() {
  if (this.model.shouldDisplayModal && !this.hasModalShown) {
    this.send('showModal');
    this.hasModalShown = true;
  }
}

总的来说，两种方法都能满足你的需求：路由层面的实现更适合一次性加载模型后触发，控制器层面的监听则更适合模型动态变化的场景，你可以根据自己的业务逻辑选择~

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