Component update it's value by click item inside it

1

I have a component called ‘my-header’

template:

<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>
            </button>
            <a class="navbar-brand" href="#">name</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">signup</a></li>
            </ul>

        </div>
    </div>
</nav>

component:

import Ember from 'ember';


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


  ]
  }
});

MyHeader.reopenClass({
  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)

2

Just use the link-to component as a

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

    • 3

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

    4

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