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

How do you recognize identify caller of click event ember.js

本文关键字：ember 事件 js 调用者 何识别 识别      更新时间：2023-09-26

我是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操作事件关联到每个分区。

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

  1. 创建一个像我一样的视图，并覆盖单击函数（e）｛｝。然而，如果我得到了这个路由，我不知道如何区分不同的div和触发它的原因。我可以查看事件的属性（target->attribute->Id），但我觉得应该有一个更干净的方法

  2. 使用操作｛｛action-click"idTagName"｝｝。然而，我在App.menuClickable中实现此操作时遇到问题。它没有被触发，我不知道为什么。我得到以下错误：

    错误：没有处理事件"click"。throw new Error（"Nothing handled the event'"+name+"'."）；

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

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

如果您想在视图上触发一个函数，请将其指定为{{action selectMenuItem "idTagName" target="view"}} 这样的目标

相关文章：