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

debugcn 发表于 Dev

土井狂热

一般来说，我正在遇到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);
           }
        };
     }

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

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

乔希·威廉克（JoshWillik）

问题

您的问题是，当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);
       }
    };
 }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。