I'm facing an issue with utilizing two style.bind in Aurelia as it doesn't seem to be functioning properly.
Alternatively, I could attempt using just one style.bind and applying the desired styles, but I am unsure of how to proceed.
Here is the code snippet:
<span repeat.for="source of item.data.sources | sort: 'weight' : 'asc'"
if.bind="source.weight"
class="weight"
style.bind="source.weight | fontWeight"
style.bind="source.is_italic && 'font-style: italic;'"
>
${source.name}
</span>
The purpose of my fontWeight valueConverter is simply to return the font-weight in CSS format:
export class FontWeightValueConverter {
toView(weight) {
return 'font-weight: ' + weight;
}
}
I opted for this approach because using
style="font-weight: ${ source.weight }"
did not yield the expected results... possibly due to weight being a reserved term?
Ultimately, my goal is to assign the font-weight based on the source.weight value and add font-style: italic; if the is_italic flag is true.
Any suggestions or insights on how to achieve this?