同一页面上的两个aurelia应用程序绑定两次

Question

我正在使用Webpack 3在同一页面上捆绑两个单独的Aurelia应用程序。

一种是应用程序的主体，并使用标准的setRoot方法：

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

另一个在旧的MVC视图上使用增强方法

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

两者都是独立的aurelia应用程序，都使用webpack AureliaPlugin

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

问题在于，只要两者都在同一页面上，单独的aurelia-binding版本就会相互干扰，这意味着通过click.delegate绑定的任何内容click.delegate在click上触发两次。

我究竟做错了什么？

Answer 1

您没有做错任何事情，这是click.delegate 。 Aurelia将一个共享事件侦听器放在delegate事件冒泡的body标记上，因此每个事件将有两个侦听器。

您可以使用click.trigger ，它不使用事件委托，而是将侦听器直接放在元素上（确保通过从处理程序中返回false来取消气泡）。