使用 Handlebars 在 Ember Octane 中切换类的正确方法？

Question

I want to toggle between class display on and display-off using Ember.js Octane. How do I do this? Do I need an @action or @tracked?

<img src="flower.jpg" alt="flower" class="display-on">  
or
<img src="flower.jpg" alt="flower" class="display-off"> 

Answer 1

This should be straight-forward in Ember (especially with Octane features).

As mentioned by @jrjohnson in the comment, the markup depends on how you manage the way you track the state, by which the classes are toggled. In an ideal case, since you need to toggle the class alone, you can render the class using the conditionals in the template with the help of a JS Class property, canShow :

<img src="flower.jpg" alt="flower" class={{if this.canShow "display-on" "display-off"}}> 

here, canShow has to be @tracked (as you mentioned) if you need to re-render the view(template) when it's value changes.

Hope you having fun learning Ember;)