Bind-attr with a sequence

1

Is there a better way to manage a {{bind-attr class="isActive:active"}} with a sequence where anything below a certain number is set with the ‘active’ class?

A use-case example would be a sequence of steps. When the current step is 3 (out of 5), steps 1 through 3 have the “active” class.

Here’s one way I got it working:

working demo jsbin edit link

Thanks!

2

You can create a component for your steps. This cleans it up quite a bit I think.

http://jsbin.com/mojex/2/

3

Thanks for the feedback, @maxn! Moving this all to components seems to be the best way to do this, thanks.

So i created a component for the steps indcators, each step indicator, the controls, and step content.

Here’s the result: preview and edit