javascript - 如何在ember.js中相对于单击的 Action 定位模式

我有一个emberjs应用程序，一个人可以：

点击链接
模态弹出
改变些什么
点击离开模态
保存更改

我创建了类似于described here的模式，并在路径上创建了事件。我可以将ember对象解析为路由，但似乎无法获得单击的DOM元素。我想要获得单击的DOM元素，因为我需要它的位置。我想相对于单击的DOM元素放置一个弹出窗口。

我在.hbs文件中的操作如下所示：

<a {{action open option}} class='choose-template'>Choose Template</a>

这个动作是由路线处理的

events: {
  open: function(option) {

    this.controller.set('field_option', option);
    this.render('modal', // the view to render
      {
          into: 'application', // the template to render into
          outlet: 'modal'  // the name of the outlet in that template

      }
    );
  },

  close: function() {
    this.render('nothing',
      { into: 'application', outlet: 'modal' });
  }
}

我在App.ModalView.didInsertElement()中处理模型定位。在这里，我想使用链接DOM元素来使模态位置本身相对于单击的链接。

最佳答案

如果您没有在action中截获view事件，它们会一直冒到没有事件可用的路线。因此，要获取事件以及由此而来的元素位置，您应该在action中定义并捕获view事件。

因此，不要在route中使用事件处理程序，而在view中创建它们：

例：

App.ModalView = Ember.View.extend({
  open: function(event) {
    // here your then have access to your event

    // Example on getting the position
    var posX = this.$().position().left,posY = this.$().position().top;
    console.log((event.pageX - posX) + ' , ' + (event.pageY - posY));

    // and then you could invoke the functions you want on your controller by
    this.get('controller').send('open', andhereparameters);
  },

  close: function(event) {
    // here your then have access to your event
    // same as above
  }
});

更新：

请注意，默认情况下，操作的目标是控制器，因此，如果要以view为目标，则应定义它：

<a {{action open option target="view"}} class='choose-template'>Choose Template</a>

希望能帮助到你。

关于javascript - 如何在ember.js中相对于单击的 Action 定位模式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18448280/