事件总线触发重复 [英] Event bus trigger duplicating

问题描述

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

In the edit modal for my company entity, I open the address entity create modal. This allows the user to create an address for the company. On the .done of the address create app service method, I trigger an event using the abp.event.trigger method. The company edit modal then watches for this event so that it can create an entry into the companyAddress entity. Soon as the companyAddress entity app service method ends, on .done event, I turn off the event trigger. However, after the first instance of creating an address, when the user adds more addresses the trigger mechanism is firing multiple times and causing duplicate entries in the companyAddress table. I have debugged this over and over and read the docs for abp event triggers and cannot figure out how this happening. Any help would be much appreciated.

创建地址模式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');
        });
    });

这是显示重复项的google chrome控制台.

Here is google chrome console showing the duplication.

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

I just tested the modals again, I entered about 8 different addresses via the create modal for 2 differnt companies. For this test, the duplication issue did not happen. But the issue where the event does not fire for each address created keeps happening. As you can see from the console log below, the ID number 2,3,5 and 6 did not generate the "started" log entry. My companyAddress table is also missing the entry for these 4 IDs, so the event did not trigger.

完整地更新代码

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);

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

Chrome console logs for updated JS code

推荐答案

摘录自

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

You can use abp.event.off method to unregister from an event. Notice that; same function should be provided in order to unregister. So, for the example above, you should set the callback function to a variable, then use both in on and off methods.

您要传递一个虚拟对象:

You're passing in a dummy object:

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函数有时根本没有执行

The addressCreated function is executing not at all sometime[s]

每个EditCompanyModal只调用一次.on，然后.off对其进行呼叫.

You're only calling .on once per EditCompanyModal, and then .off-ing it.

将.off移至this.save = ....

将.off移至this.init = ....

this.init = function (modalManager) {
    _modalManager = modalManager;

    // ...

    _modalManager.onClose(function () {
        abp.event.off('addressCreated', addressCreated); // Turn off this handler
    });
};

这篇关于事件总线触发重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！