Question

任何人都可以了解我收到第一条主机消息的原因：＆＃39; 1 .list-group-item＆＃39;在类实例化，但按下＆＃39; .remove_track＆＃39;按钮后，我得到这个.DOM.TrackItems为undefined？非常感谢任何帮助或建议。

class MyList
        constructor() {
            this.DOM = {
                ParentNode: '#mylist',
                AddTrackButton: '#add_track',
                RemoveTrackButtons: '.remove_track',
                TrackItems: '.list-group-item'
           };

            this.bind(this.DOM.ParentNode, this.DOM.RemoveTrackButtons, 'click', this.removeTrack);

        };

        //jQuery on/off methods
        bind(parentSelector, childSelector, eventName, functionName) {
            console.log('1 ' + this.DOM.TrackItems);
            $(parentSelector).on(eventName, childSelector, functionName);
        };

        unbind(parentSelector, childSelector, eventName, functionName){
            $(parentSelector).off(eventName, childSelector, functionName);
        }

        removeTrack(evt) {
            evt.preventDefault();
            console.log('2 ' + this.DOM.TrackItems);
        }
}

//编辑：

Here's a jsfiddle

Answer 1

问题与上下文this的范围有关，该方法使用事件click中的处理程序的上下文，特别是单击的按钮而不是类{{1}的上下文}。

另一种方法是使用函数MyList绑定上下文：

bind

如果您需要访问被点击的元素，可以使用参数+----- This is the object MyList | v functionName.bind(this); <---- This call returns a new function bound with ^ the specific context. | +---- This function binds the context。

event

class MyList {
  constructor() {
    this.DOM = {
      ParentNode: '#mylist',
      AddTrackButton: '#add_track',
      RemoveTrackButtons: '.remove_track',
      TrackItems: '.list-group-item',
      Output: '#output'
    }

    this.bind(this.DOM.ParentNode, this.DOM.RemoveTrackButtons, 'click', this.removeTrack);
  };

  bind(parentSelector, childSelector, eventName, functionName) {
    $(this.DOM.Output).html('Called Bind'); //works
    // This is the line with a fix.
    $(parentSelector).on(eventName, childSelector, functionName.bind(this));
  };

  unbind(parentSelector, childSelector, eventName, functionName) {
    $(this.DOM.Output).html('Called Unbind');
    $(parentSelector).off(eventName, childSelector, functionName);
  }

  removeTrack(evt) {
    evt.preventDefault();
    console.log(evt.target);
    console.log(this); // This is just to show the content of this.
    $(this.DOM.Output).html('Called removeTrack');
  }
}

x = new MyList();

Javascript中的类 - 在作为参数传递的方法之后未定义属性

1 个答案: