如何在ember.js中相對於單擊的動作定位模式

Question

我有一個emberjs應用程序，一個人可以：

單擊鏈接模態彈出更改某些內容單擊模態保存更改

我創建了類似於此處所述的模式，並帶有路線上的事件。 我可以將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元素來使模態位置本身相對於單擊的鏈接。

Answer 1

如果您沒有在view截獲action事件，它們會一直冒到沒有事件可用的路線。 因此，要獲取事件以及由此而來的元素位置，您應該在view定義並捕獲action事件。

因此，與其在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>

希望能幫助到你。