I'm using a Ractive.JS binding:
var alertsBinding = new Ractive({
el: '.alerts',
template: alertsTemplate,
data: {
alerts: alerts,
selectedAlertID: null
}
});
The template uses a template expression to detect if an item is the currently selected item and add a class accordingly:
<div class="alert {{ id === selectedAlertID ? 'selected' }}">
...
</div>
When an item is selected, I run:
alertsBinding.set({selectedAlertID: selectedAlert.id});
After setting I can see the condition is always false, even when condition should be true. I have also checked by adding the following:
id{{ id}} selected{{ selectedAlertID}}
Inside the alert to confirms the item is actually selected.
Yet still the condition is false, and the class not set.
How can I test equality in a template expression?
The expression has to be legal JavaScript; in this case, there needs to be an alternative as well as a consequent:
<div class="alert {{ id === selectedAlertID ? 'selected' : '' }}">
...
</div>
When the parser doesn't see a colon followed by another expression, it stops trying to parse the ternary expression and falls back to treating it as a bog-standard reference. It would probably be helpful if the parser provided more feedback in these situations - I've opened an issue on GitHub .
As an alternative, you could also do
<div class="alert {{# id===selectedAlertID }}selected{{/}}">
...
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.