javascript - 如何在 ember.js 中相对于单击操作定位模态

Question

我有一个 emberjs 应用程序，人们可以在其中:

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

我创建的模式很像 described here , 与路线上的事件。我可以将 ember 对象解析到路由中，但我似乎无法获得单击的 DOM 元素。我想获得被点击的 DOM 元素，因为我需要它的位置。我想相对于单击的 DOM 元素定位弹出窗口。

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

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

并且这个 Action 由路由处理

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 元素使模态位置本身相对于单击的链接。

Answer 1

如果您不拦截 view 中的 action 事件，它们会一直冒泡到没有可用事件的路由。因此，要获得您的事件及其起源的元素位置，您应该在 view 中定义和捕获您的 action 事件。

因此，与其在您的路由中创建事件处理程序，不如在您的 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
  }
});

更新:

请注意，默认情况下，您的操作的目标是 Controller ，因此如果您想以 view 为目标，您应该定义它:

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

希望对您有所帮助。