你如何识别点击事件的调用者 ember.js答案

【问题标题】：How do you recognize identify caller of click event ember.js你如何识别点击事件的调用者 ember.js
【发布时间】：2013-08-30 00:51:31
【问题描述】：

我是 ember.js 的新手，想知道如何确定是哪个 div 创建了点击事件。

index.html

------------旧代码-----------

 {{#each App.menuController}} 
     {{#view App.menuClickable}}
        <div id={{bindAttr id="idTagName"}}>
           {{title}}
        </div>
     {{/view}}
 {{/each}}

---------更新代码---------

 {{#each App.menuController}} 
        <div id={{bindAttr id="idTagName"}} {{action selectMenuItem target="App.menuClickable"}}>
           {{title}}
        </div>
 {{/each}}

app.js

App.MenuOption = Ember.Object.extend({
    title: null,
    idName: null
});

App.menuController = Ember.ArrayController.create({
   content:[],
   init : function() 
   {
        // create an instance of the Song model
        for(var i=0; i<menuOptions.length; i++) {
            console.debug(menuOptions[i]);
            this.pushObject(menuOptions[i]);
        }

   },
   click: function(e)
   {
     alert("here");  
   }
});


App.menuClickable = Ember.View.extend({
  click: function(evt) {
    alert("ClickableView was clicked!");
    console.debug(evt);
  },
  classNames: ['navButton'],
  selectMenuItem: function()
  {
    alert("selected Menu clicked");
  }
});

如您所见，这将打印出几个具有不同标签名称的 div。我想将一个 onclick 动作事件关联到每个 div。

环顾四周，似乎有两种方法：

像我一样创建一个视图并覆盖点击函数(e){}。但是，如果我得到这条路线，我不确定如何区分不同的 div 以及触发它的原因。我可以查看事件的属性（target->attribute->Id），但我觉得应该有更简洁的方法
使用操作 {{action click "idTagName"}}。但是，我在 App.menuClickable 中实现此操作时遇到问题。它没有被触发，我不知道为什么。我收到以下错误：

错误：没有处理“点击”事件。 throw new Error("没有处理事件'" + name + "'.");

我以为你会像我在 App.menuClickable 中那样实现点击操作。还有其他地方应该实施吗？

【问题讨论】：

标签： javascript ember.js onclick

【解决方案1】：

{{action selectMenuItem "idTagName"}} 方法是这里的方法。默认情况下，{{action}} 助手将在控制器的 actions 哈希中查找 selectMenuItem 函数。如果没有找到，它将被发送到路由器，它会检查当前路由和任何父路由的selectMenuItem 函数在路由的actions 哈希中。

如果要在视图上触发函数，请将其指定为目标，例如{{action selectMenuItem "idTagName" target="view"}}

【讨论】：

我尝试了 {{action selectMenuItem target="App.menuClickable"}} 路由，但它似乎无法识别操作“selectMenuItem。Fire bug 抱怨“操作 'selectMenuItem' 不存在App.menuClickable”。关于我为什么会遇到这种情况的任何建议。我已经更新了主帖中的代码以反映我所做的事情。顺便说一句，感谢您的回复！
尝试用target="view"替换target="App.menuClickable"
是的，我试过了，但没有运气。我想我没有清楚地了解所有对象是如何联系起来的。示例：创建索引模板 -> 与 IndexRoute 关联 -> 链接到 IndexController。当我向所有这些添加相同的方法时，它会按预期工作。 IndexController 被调用，如果未定义，则调用 IndexRoute 方法。但是，我不确定为什么视图不起作用或者它必须是 IndexView 而不是我的 menuClickable 视图。我认为您可以将任何视图与“目标”一起使用。
也相关：stackoverflow.com/questions/18500026/…
会考虑更多，但快速回答是，是的，它应该是一个 IndexView。我认为您缺少的是每个 ember 模板总是由视图支持，即使您没有定义一个。所以 target="view" 表示以当前视图为目标。