Component update it's value by click item inside it

I have a component called ‘my-header’


<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">

            <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>
            <a class="navbar-brand" href="#">name</a>
        <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}}">{{}}</a></li>


            <ul class="nav navbar-nav navbar-right">
                <li class={{if (eq activePosition 3) 'active' ''}}><a href="#/account/signup">signup</a></li>



import Ember from 'ember';

const MyHeader = Ember.Component.extend({
  liStringArray: [{
    "name": 'main',
    "route": '#'
  }, {
    "name": 'exampaper',
    "route": '#/exampaper'
    "name": 'account',
    "route": '#/account'


  positionalParams: ['activePosition']

export default MyHeader;

now, I want click <a href="#/account/signup"> and let it’s class attr set to ‘active’ and update value in component’s field variable(times)

Just use the link-to component as a

  • . Don’t forget to add href=false to avoid link click.

  • How to do something on click link-to ? (this.set(‘times’,+1)) ?

    Sorry about late. This can help u javascript - Combine linkTo and action helpers in Ember.js - Stack Overflow