CODEWITHSUNDEEP
javascriptbindingtemplatingractivejs
mikemaccana
mikemaccana

Reputation: 123138

RactiveJS: how can I test equality in a template expression?

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.

enter image description here

Yet still the condition is false, and the class not set.

How can I test equality in a template expression?

Upvotes: 0

Views: 273

Answers (1)

Rich Harris
Rich Harris

Reputation: 29585

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>

Upvotes: 1

Related Questions