2

I am implementing a page with 10 views that hide/show based on a variable called currentView.

I have it working using the ${} syntax and my own hide/show classes...

<style>
.show { display: block; }
.hide { display: none; }
</style>

<div class="view0 ${currentView == 0 ? 'show' : 'hide'}"></div>
<div class="view1 ${currentView == 1 ? 'show' : 'hide'}"></div>
<div class="view2 ${currentView == 2 ? 'show' : 'hide'}"></div>
<div class="view3 ${currentView == 3 ? 'show' : 'hide'}"></div>
<div class="view4 ${currentView == 4 ? 'show' : 'hide'}"></div>
<div class="view5 ${currentView == 5 ? 'show' : 'hide'}"></div>
<div class="view6 ${currentView == 6 ? 'show' : 'hide'}"></div>
<div class="view7 ${currentView == 7 ? 'show' : 'hide'}"></div>
<div class="view8 ${currentView == 8 ? 'show' : 'hide'}"></div>
<div class="view9 ${currentView == 9 ? 'show' : 'hide'}"></div>

...but I was wondering if there is a simple way to accomplish the same thing using if.bind?

Tyson
  • 21
  • 3
  • `` – Aluan Haddad Jul 15 '20 at 19:57
  • Brilliant! Please note: To make it work, I needed to change the "currentView === i" condition to use double equals instead of triple equals. – Tyson Jul 15 '20 at 23:45
  • Glad that helped. If you needed to use `==` then `currentView` must be a `string` instead of a `number` which isn't evident from the question. I would suggest you adjust the types appropriately so you can use strict equality. – Aluan Haddad Jul 16 '20 at 01:53
  • 1
    While this will work, it's probably a better/cleaner idea to use different views/viewmodels for each view you want to show, and use the router or the ```compose``` element to make it work – Arne Deruwe Jul 16 '20 at 07:01

0 Answers0