在Ember中如何将<tr>元素的value值作为函数参数传递？

嘿，这个问题我之前在Ember开发里也碰到过，给你几个实用的解决办法：

方法1：通过事件对象获取DOM元素的value #

因为你是动态生成的表格行，模板里的this指向的是组件/控制器的上下文，不是<tr>元素本身，所以直接写this.value肯定拿不到值。换个思路，利用Ember action默认传递的事件对象来获取：

模板代码： #

<tr value="0" onmouseover={{action 'displayBar'}}>
  <!-- 表格内容 -->
</tr>

组件/控制器代码： #

displayBar(event) {
  // 拿到触发事件的<tr>元素的value属性
  const rowValue = event.target.value;
  console.log(rowValue); // 现在就能正确获取到"0"或者其他动态设置的值了
}

这个方法的核心是通过事件对象的target属性直接访问触发事件的DOM元素，不管你是怎么生成的行，只要DOM上有value属性，就能拿到。

方法2：数据驱动传递（更符合Ember最佳实践） #

如果你的表格行是基于数据生成的（比如从数组循环出来），那更推荐直接把数据里的value作为参数传给action，而不是依赖DOM属性：

模板代码（假设你用each循环生成行）： #

{{#each rowData as |row|}}
  <tr value={{row.value}} onmouseover={{action 'displayBar' row.value}}>
    <!-- 表格内容 -->
  </tr>
{{/each}}

组件/控制器代码： #

displayBar(rowValue) {
  console.log(rowValue); // 直接拿到对应行的数据值
}

这种方式更符合Ember的数据驱动理念，避免直接依赖DOM，也能避免因为DOM操作导致的绑定问题——毕竟你之前是复制原有行修改value，这种手动DOM操作很容易脱离Ember的追踪范围。

为什么你之前的写法不行？ #

• this.value：模板里的this是组件/控制器实例，不是<tr>元素，所以自然拿不到DOM元素的value属性；
• value="target.value"：这种写法不符合Ember模板的语法，模板里不能直接这么引用事件对象的属性，必须在action函数里通过参数获取；
• 直接传"0"：这是硬编码的字符串，当然能拿到，但没法适配动态生成的不同行。

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