Compiled js breaks template function calls

1

In a template I’m calling a function from the js file

style="background: ${ getColor(zt_value) }"

(code at https://github.com/ome/omero-iviewer/pull/245/files#diff-ea2be679647f59abfbf8afeb346c3524R46) and this is working fine when I running with the webpack developement server.

But when I build for production this fails with the html simply rendered as

style="background: {}"

I’m not sure what it is that I’m doing differently with the prod build. My prod webpack config is at https://github.com/ome/omero-iviewer/blob/1c4454495e59c03842fed533aac65bb2a61f5dd9/webpack.prod.config.js

Or should I be using a different technique so that the template doesn’t need to call getColor()?

Many thanks,
Will.

1 Like
2

https://aurelia.io/docs/binding/class-and-style#style

What you need is css= , style attribute is handled by browser natively, aurelia had no chance to peek in the string.

2 Likes
3

That worked perfectly, thanks.
Strange that it was working with the webpack dev server, so I would never have guessed that I needed css instead.

1 Like