1.
I have a my-heade r component on top of my webpage
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#hamburger">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">app</a>
</div>
<div class="collapse navbar-collapse" id="hamburger">
<ul class="nav navbar-nav">
{{#each liStringArray as |item index|}}
<li class={{if (eq activePosition index) 'active' ''}}>
<a href="{{item.route}}">{{item.name}}</a></li>
{{/each}}
</ul>
<ul class="nav navbar-nav navbar-right">
<li class={{if (eq activePosition 3) 'active' ''}}><a href="#/account/signup">signout</a></li>
<li class={{if (eq activePosition 4) 'active' ''}}><a href="#/account/signin">signin</a></li>
</ul>
</div>
</div>
2
.I have a service called my-pre to keep valve(activePosition) to recode now active position (because I want set class value .active in my-header in li tag
)
export default Ember.Service.extend({
activePosition: 0,});` when click button send an action to it's controller to set activePosition value
(ex:activePosition =0 first index li set active or activePosition =1;)
t it is every tedious
