Knockout bindings don't work in Aurelia custom elements

[1hella]

It seems like any knockout bindings I try in a custom element won't work. Here's a simple example:

test.js

export class Test {
  sampleText = 'hello';
}

test.html

<template>
  <div knockout>
    <!-- ko text: sampleText -->
    <!-- /ko -->
  </div>
</template>

index.js

import { PLATFORM } from 'aurelia-framework';

export function configure(config) {
  config.globalResources([
    PLATFORM.moduleName('./elements/test')
  ]);
}

Then when I use the <test></test> element somewhere I get the error

ERROR [app-router] ReferenceError: Unable to process binding "text: function (){return sampleText }"
Message: sampleText is not defined

What does work is changing <test></test> to <compose view-model="../../resources/elements/test"></compose>, but is there any way to get knockout bindings to work without switching to compose?

[ckotzbauer]

hi @1hella, I tried to reproduce this behavior but the bindings are working: https://github.com/code-chris/aurelia-knockout-binding

Which technology stack do you use?

[1hella]

Hi @code-chris. I'm using the default settings from the Aurelia command line tools (0.33.1), which is

Platform: Web Bundler: Webpack Loader: None Transpiler: Babel Markup Processor: Minimal Minification

I was able to reproduce it from the base generated project after adding a <div knockout> around the <test> element. That seems to be the key.

So from the base project, I was able to reproduce it with the following:

yarn add aurelia-knockout

main.js

...
  aurelia.use
    .standardConfiguration()
    .feature(PLATFORM.moduleName('resources/index'))
    .plugin(PLATFORM.moduleName('aurelia-knockout'));
...

app.js export class App {}

app.html

<template>
  <div knockout>
    <test></test>
  </div>
</template>

And the code from above.

[ckotzbauer]

• I figured out, that the default aurelia-webpack-setup strips comments in html if I build with the prod environment (Don't tried "Minimal Minification" mode). This does not happen in normal dev mode.
• Wrapping the custom-element in a new knockout-div is definitely wrong. If both divs are present knockout throws an error that a binding is applied twice. Also this would bind the custom-element to the app-view-model instead and not to the corresponding custom-element model as you want.

[1hella]

@code-chris Ah okay that makes sense that it gets bound to the app view model instead of the custom element then. I didn't realize I couldn't just wrap everything in a knockout div.

Thanks for letting me know about the comments too.