2

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

索引.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}}

应用程序.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。

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

  1. 创建一个像我一样的视图并覆盖点击函数（e）{}。但是，如果我得到这条路线，我不确定如何区分不同的 div 以及触发它的原因。我可以查看事件的属性（target->attribute->Id），但我觉得应该有更简洁的方法

  2. 使用动作 {{action click "idTagName"}}。但是，我在 App.menuClickable 中实现此操作时遇到问题。它没有被触发，我不知道为什么。我收到以下错误：

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

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

4

1 回答 1

2

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

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

于 2013-08-30T07:38:13.027 回答