如何为ember-growl-notification的Flash消息添加Ember选择器？

嘿，我来帮你搞定这个Ember Growl通知的测试选择器问题！我目前在使用Ember Growl Notification组件，执行保存操作时会检查特定条件并显示Flash消息。现在我需要给这个Flash消息添加Ember测试选择器，但用jQuery添加属性后，在元素检查里根本看不到这个选择器。

在控制器的保存点击事件中，我调用了这段代码：

if(productDontAllow && (!!userManagement)) { 
  this.get('emberGrowlService').showNotification({ 
    message: messageDisplay, 
    type: success 
  }); 
  Ember.$('.ember-growl-notification-item').attr('data-test-flash-failure','') 
  return; 
}

问题根源 #

你现在的写法有个关键问题：调用showNotification之后立刻用jQuery去选元素，这时候组件可能还没完成渲染。Ember的组件渲染是异步的，当你执行showNotification时，通知元素还没被插入DOM，所以jQuery根本找不到这个元素，自然加不上属性。

解决方案 #

给你几个靠谱的解决思路：

1. 自定义Ember Growl组件（推荐） #

最稳妥的方式是扩展原有的Ember Growl组件，让它支持直接传入测试属性：

• 生成一个自定义组件文件，比如app/components/custom-ember-growl-notification-item.js
• 在组件模板里绑定测试属性（假设原组件模板结构类似）：

{{! app/templates/components/custom-ember-growl-notification-item.hbs }}
<div class="ember-growl-notification-item" data-test-flash={{this.dataTest}}>
  {{! 保留原组件的所有内容 }}
</div>

• 调用通知时直接传入测试属性参数：

this.get('emberGrowlService').showNotification({ 
  message: messageDisplay, 
  type: success,
  dataTest: 'flash-failure' // 这里传入测试属性值
});

这种方式完全符合Ember的数据流，不会依赖DOM操作，稳定性拉满。

2. 用Ember Run循环延迟DOM操作 #

如果暂时不想改组件，也可以用Ember的run.next来延迟执行jQuery代码，确保元素已经渲染到DOM里：

if(productDontAllow && (!!userManagement)) { 
  this.get('emberGrowlService').showNotification({ 
    message: messageDisplay, 
    type: success 
  }); 
  // 等当前渲染循环完成后再操作DOM
  Ember.run.next(() => {
    Ember.$('.ember-growl-notification-item').attr('data-test-flash-failure','');
  });
  return; 
}

不过这种方式依赖组件的类名，后续如果组件更新改了类名，代码就失效了，只能作为临时方案。

3. 检查组件自带配置 #

有些Ember Growl库本身就支持自定义属性或者自定义模板，你可以翻一下它的文档，看看有没有直接传入attributes或者自定义模板的选项，要是有的话直接用官方方案最省心。

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