Two aurelia apps on same page binding twice

Question

I am using Webpack 3 to bundle two separate Aurelia apps on the same page.

One is the main body of the application and uses the standard setRoot method:

export function configure(aurelia) {
    aurelia.use
        .standardConfiguration()
        .feature(PLATFORM.moduleName('resources/index'));

    aurelia.start().then(a => {
        aurelia.setRoot(PLATFORM.moduleName('shells/app'),
        document.getElementById('AppBodyContainer'));
    });
}

The other uses the enhance method on an old MVC view

const enhanceNode = (app, node, bindingContext = null) => {
    const engine = app.container.get(TemplatingEngine);
    const component = engine.enhance({
        container: app.container,
        element: node,
        resources: app.resources,
        bindingContext: bindingContext
    });
    component.attached();
};

export function configure(aurelia) {
    aurelia.use
        .standardConfiguration()
        .feature(PLATFORM.moduleName('resources/index'));

    aurelia.start().then(a => {
        enhanceNode(a, document.getElementById('HeaderContainer'));
    });
}

Both are standalone aurelia apps, and both use the webpack AureliaPlugin

new AureliaPlugin({
    aureliaApp: 'header-app'
}),

The problem is that whenever both are on the same page, the separate version of aurelia-binding are interfering with each other, which means that anything bound through click.delegate is fired twice on click.

What am I doing wrong?

Answer 1

You're not doing anything wrong, this is something specific to click.delegate. Aurelia puts a shared event listener on the body tag that the delegate events bubble up to, so there will be two listeners per event because of this.

You could use click.trigger which does not use event delegation, but instead puts the listener directly on the element (make sure to cancel the bubble by returning false from your handler).