在 ember 中获取动作目标元素答案

【问题标题】：get action target element in ember在 ember 中获取动作目标元素
【发布时间】：2013-09-16 17:33:15
【问题描述】：

如何获取触发点击事件的目标元素的对象。例如，如果我有这样的模板：

<table>
<tr>
    <th {{action "someAction"}} >Type</th>
</tr>
</table>

在我的控制器中，我定义了相应的操作，例如：

action:{
    someAction : function(){
        //get the th element object 
    }
}

好像没有通过事件对象，因为我试过了

action:{
    someAction : function(event){
        //event is undefined!
    }
}

更新：谢谢马尔西奥和杰里米。我现在有了一个可行的解决方案。我的模板如下所示：

<thead>
        {{#view AS.MyView sortBy="value"}}Value{{/view}}
</thead>

我的看法是这样的：

AS.MyView = Ember.View.extend({
attributeBindings: ['sortBy'],
classNames: ['sortable'],
tagName: 'th',
click: function(evt) {
    var target = evt.target, self = this;
    this.get('controller').send('setSort',$(target).attr('sortBy'));

    $(target).parent().find('th').removeClass('desc').removeClass('asc');
    $(target).addClass(self.get('controller.sortAscending')?'asc':'desc');
}
});

【问题讨论】：

你能解释一下你想用这个元素做什么，也许还有其他方法可以完成它。例如，如果是关于样式，可以使用 classNameBinding ...
你说得对，我想根据点击在第 th 元素上设置样式。我想实现可排序的表格，这样当用户根据哪一列和什么顺序点击时，我想改变样式。我将尝试查看 classNameBinding。谢谢。

标签： ember.js

【解决方案1】：

classNameBinding 是这个用例的绝佳选择。

仅供参考，如果您需要处理低级别的浏览器事件，可以在View层中进行。

http://emberjs.com/guides/views/handling-events/

{{#view App.ClickableView}}
This is a clickable area!
{{/view}}

App.ClickableView = Ember.View.extend({
  click: function(evt) {
    alert("ClickableView was clicked!");
  }
});

【讨论】：