Javascript 事件总线触发器复制

在我的公司实体的编辑模式中，我打开地址实体创建模式。这允许用户为公司创建地址。在address create app service方法的.done中，我使用abp.event.trigger方法触发一个事件。然后，“公司编辑”模式监视此事件，以便它可以在companyAddress实体中创建条目。一旦companyAddress实体应用程序服务方法结束，在.done事件上，我关闭事件触发器。但是，在创建地址的第一个实例之后，当用户添加更多地址时，触发机制会多次触发，并导致companyAddress表中出现重复条目。我已经一遍又一遍地调试了这个程序，并阅读了abp事件触发器的文档，但我无法理解这是如何发生的。任何帮助都将不胜感激

创建地址模式js

    this.save = function () {
        if (!_$form.valid()) {
            return;
        }
        var address = _$form.serializeFormToObject();
        _modalManager.setBusy(true);
        _addressService.createAddress(
            address
        ).done(function (result) {
            abp.notify.info(app.localize('SavedSuccessfully'));
            abp.event.trigger('addressCreated', {
                id: result
            });
            console.log('addressCreated event triggered for id: ' + result);
            _modalManager.close();
        }).always(function () {
            _modalManager.setBusy(false);
        });
    };

编辑公司模式js

    abp.event.on('addressCreated', function (item) {
        console.log('addressCreated event caught for id: ' + item.id);
        //Call company address service
        var _companyAddressService = abp.services.app.companyAddress;
        _companyAddressService.createCompanyAddress({
            CompanyId: $("#CompanyId").val(),
            AddressId: item.id
        }).done(function () {
            abp.event.off('addressCreated', {
                id: null
            });
            console.log('addressCreated event turned off for id: ' + item.id);
            abp.notify.success(app.localize('AddressCreated'));
            abp.ui.clearBusy('.modal-body');
        });
    });

这是谷歌chrome控制台显示的复制。

我刚刚再次测试了这些模式，我通过create模式为2家不同的公司输入了大约8个不同的地址。对于此测试，没有发生重复问题。但是，事件不会为创建的每个地址触发的问题一直在发生。从下面的控制台日志中可以看到，ID号2、3、5和6没有生成“已启动”日志条目。My companyAddress表也缺少这4个ID的条目，因此事件没有触发。

编辑company modal.js full更新的代码

var EditCompanyModal = (function ($) {
app.modals.EditCompanyModal = function () {

    var _modalManager;
    var _companyService = abp.services.app.company;

    var _$Form = null;
    this.init = function (modalManager) {
        _modalManager = modalManager;

        _$Form = _modalManager.getModal().find('form[name=EditCompany]');
        $(".modal-dialog").addClass("modal-lg");
        _$Form.validate();
    };

    this.save = function () {
        if (!_$Form.valid()) {
            return;
        }
        var company = _$Form.serializeFormToObject();
        _modalManager.setBusy(true);
        _companyService.updateCompany(
            company
        ).done(function () {
            abp.notify.info(app.localize('SavedSuccessfully'));
            _modalManager.close();
            abp.event.trigger('app.editCompanyModalSaved');
        }).always(function () {
            _modalManager.setBusy(false);
        });

        abp.event.off('addressCreated', addressCreated); // Turn off this handler
    };

    var _editModal = new app.ModalManager({
        viewUrl: abp.appPath + 'Nursing/Address/EditModal',
        scriptUrl: abp.appPath + 'view-resources/Areas/Nursing/Views/Address/_EditModal.js',
        modalClass: 'EditAddressModal'
    });

    var _createModal = new app.ModalManager({
        viewUrl: abp.appPath + 'Nursing/Address/CreateModal',
        scriptUrl: abp.appPath + 'view-resources/Areas/Nursing/Views/Address/_CreateModal.js',
        modalClass: 'CreateAddressModal'
    });

    $('#add_new_address').click(function (e) {
        _createModal.open();
    });

    $('#addressTiles').on('click', '.btnEditAddress', function () {
        var addressID = $(this).parent().find("input").first().val();
        _editModal.open({ id: addressID });
    });

    abp.event.on('addressCreated', addressCreated);

     //After address create event, save company address Id
    function addressCreated(item) {
        console.log(new Date().toUTCString() + ' - addressCreated started for id: ' + item.id);
        //Call company address service
        var _companyAddressService = abp.services.app.companyAddress;
        _companyAddressService.createCompanyAddress({
            CompanyId: $("#CompanyId").val(),
            AddressId: item.id
        }).done(function () {
            console.log('addressCreated event turned off for id: ' + item.id);
            abp.notify.success(app.localize('AddressCreated'));
            abp.ui.clearBusy('.modal-body');
        });
    }

};})(jQuery);

更新JS代码的Chrome控制台日志

来自以下文档：

您可以使用abp.event.off方法从事件中取消注册。注意；应提供相同的功能以取消注册。因此，对于上面的示例，您应该将回调函数设置为一个变量，然后在on和off方法中同时使用

您正在传入一个虚拟对象：

abp.event.off('addressCreated', {
    id: null
});

这样做：

function addressCreated(item) {
    console.log('addressCreated event caught for id: ' + item.id);
    //Call company address service
    var _companyAddressService = abp.services.app.companyAddress;
    _companyAddressService.createCompanyAddress({
        CompanyId: $("#CompanyId").val(),
        AddressId: item.id
    }).done(function () {
        abp.event.off('addressCreated', addressCreated); // Turn off this handler
        console.log('addressCreated event turned off for id: ' + item.id);
        abp.notify.success(app.localize('AddressCreated'));
        abp.ui.clearBusy('.modal-body');
    });
}

abp.event.on('addressCreated', addressCreated);

addressCreated函数在某个时间根本没有执行

您只需为每个

editCompanyModel

调用

.on

一次，然后

.off

-ing它

将.off移到这个.save=

将

.off

移动到

this.init=…

this.init=函数（modalManager）{
_modalManager=modalManager；
// ...
_onClose（函数（）{
abp.event.off（'addressCreated'，addressCreated）；//关闭此处理程序
});
};

我尝试了这一更改，但现在我在abp.event.off-line上得到了“Uncaught ReferenceError:addressCreated未定义”的消息它起到了作用，但随着我进一步测试，重复仍然时不时地发生。addressCreated函数仍在执行多次，而不是某个时候。我已经更新了我的帖子以显示最新的chrome控制台日志。是的，在我分享的最新控制台映像中，问题是触发事件没有针对ID 2和3触发。其他时候，它会为同一个ID触发多次。我已经更新了我的帖子，最新的测试显示了chrome控制台。我还为事件触发器添加了JS代码