Update

Question

在我的公司实体的编辑模式中，我打开地址实体创建模态。这允许用户为公司创建地址。在地址创建应用服务方法的.done上，我使用abp.event.trigger方法触发事件。公司编辑模式然后监视此事件，以便它可以创建一个进入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控制台显示重复。

我刚刚再次测试了模态，我通过创建模式为2个不同的公司输入了大约8个不同的地址。对于此测试，没有发生重复问题。但是事件不会为每个创建的地址触发的问题不断发生。从下面的控制台日志中可以看出，ID号2,3,5和6没有生成＆＃34;已启动＆＃34;日志条目。我的companyAddress表也缺少这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的文档：

您可以使用 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函数根本不执行[s]

您每.on只调用EditCompanyModal一次，然后.off调用它。

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

Update

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

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

    // ...

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

事件总线触发重复

1 个答案:

Update