事件总线触发器复制

Question

在我公司实体的编辑模式中，我打开地址实体创建模式。这允许用户为公司创建地址。在地址创建应用程序服务方法的 .done 上，我使用 abp.event.trigger 方法触发了一个事件。公司编辑模式然后监视此事件，以便它可以创建一个进入 companyAddress 实体的条目。 companyAddress 实体应用程序服务方法结束后，在 .done 事件上，我关闭事件触发器。但是，在创建地址的第一个实例之后，当用户添加更多地址时，触发机制会多次触发并导致 companyAddress table 中出现重复条目。我已经一遍又一遍地调试它并阅读了 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');
        });
    });

这里是 google chrome 显示重复的控制台。

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

编辑公司modal.js完整更新代码

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 代码的控制台日志

Answer 1

来自 Register To Events 上的文档：

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.

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

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

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

每个 EditCompanyModal 只调用一次 .on，然后 .off-ing 它。

~~将 .off 移动到 this.save = ....~~

将 .off 移动到 this.init = ...。

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

    // ...

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

事件总线触发器复制

Event bus trigger duplicating

javascript

aspnetboilerplate