将事件绑定到对象内的函数

Question

一般来说，我正在遇到jQuery / JS的一个特殊问题。

我正在处理一个JS文件，该文件可让我为客户端站点创建portlet。 我正在使用SignalR将更改传达给用户。

以下代码让我有些头痛，为什么它不起作用。

Eenheden: function (poPortlet) {
        this.moPortlet = poPortlet;
        this.Init = function () {
           $(this.moPortlet).find('.portlet-title').text($(this.moPortlet).attr('data-cpv-type') + ' Eenheden')
        };
        this.BindHub = function () {
           CPV.moHub.on('onEenheidUpdate', this.Events.Update);
        };
        this.Events = {
           Update: function (pnId, psStatus) {
              CPV.Log('Error', 'Update: ' + pnId + ' ' + psStatus);
           }
        };
     }

我正在尝试将SignalR事件onEenheidUpdate绑定到this.Events.Update函数。 这些Eenheiden对象的实例在页面上不是唯一的。 想法是它们包含相同的数据，但可以进行过滤，根据某些配置创建不同的portlet。

我的问题是onEenheidUpdate函数不会触发适当的事件。 我想这样做，以便可以使用为唯一对象设置的引用，例如在初始化时设置的jQuery对象。

Answer 1

问题

您的问题是，当jQuery或javascript通常触发事件回调时，“上下文”（ this值）将被更改。 例如

var MyModule = {
    init: function () {
        $('.amazing-element').on('click', function () {
            // This breaks because `
            // `this` is not MyModule
            // When the callback is triggered
            // `this` is `<p class="amazing-element"></p>`
            this.onClick()
        })
    },
    onClick: function () {
        console.log('wee, I was clicked')
    }
}

Function.prototype.bind抢救！

var MyModule = {
    init: function () {
        $('.amazing-element').on('click', function () {
            this.onClick()
        }.bind(this))
        // ^ here we bind the context of the callback to the
        // correct version of `this`.
    },
    onClick: function () {
        console.log('wee, I was clicked')
    }
}

因此，您的确切示例如下所示：

Eenheden: function (poPortlet) {
    this.moPortlet = poPortlet;
    this.Init = function () {
       $(this.moPortlet).find('.portlet-title').text($(this.moPortlet).attr('data-cpv-type') + ' Eenheden')
    };
    this.BindHub = function () {
       CPV.moHub.on('onEenheidUpdate', this.Events.Update.bind(this));
                                                      // ^ change here
    };
    this.Events = {
       Update: function (pnId, psStatus) {
          CPV.Log('Error', 'Update: ' + pnId + ' ' + psStatus);
       }
    };
 }