ember 具有不同 id 的多个组件

Question

我在 ember 中有一个组件，我将其命名为 foo

import Ember from 'ember';
var data, elTop;
export default Ember.Component.extend({
  init(){
    this._super(...arguments);
  },
  didInsertElement(){
    this._super(...arguments);
    data = this.get('id');
    elTop = $('#'+data).offset().top;
    console.log(elTop);
  }
});

顺便说一句，我在父模板中使用了这个组件两次，每个组件的位置都不同，但是为什么当 iam 控制台记录偏移量顶部时，值是相同的。

谁能解释一下并解决这个问题？我避免使用这个 console.log($('#'+data).offset().top) 它的工作但在我使用滚动事件时显示故障。

谢谢你:)

Answer 1

需要在组件内部引入属性elTopdata
您可以使用 this.$

访问组件 dom

import Ember from 'ember';
export default Ember.Component.extend({
    data: '',
    elTop: '',
    didInsertElement() {
        this._super(...arguments);
        elTop = this.$().offset().top;
        console.log(elTop);
    }
});

ember 具有不同 id 的多个组件

ember multiple component with various id

javascript

ember.js

ember-router

ember-controllers

ember-components