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绑定的任何内容都会在点击时触发两次。

我在做什么错了？

Answer 1

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

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

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

1 个答案: