item-hash-2

components.my-component-item.js

import Ember from 'ember';
const {computed, get, isEmpty, isBlank, set} = Ember;

export default Ember.Component.extend({
  
  	name: null,
  	slug: null,
  
  	init(){
        this._super(...arguments);
      
      	const { name, slug } = this.attrs;

        if(isBlank(slug)){
            set(this, 'slug', Ember.String.dasherize(get(this,'name')));
        }
      
        this['register-item'](this);
    },
  
  	isActive: computed('manager.currentItem.slug', 'slug', function() {
        return get(this, 'manager.currentItem.slug') === get(this, 'slug');
    }),
});

components.my-component.js

import Ember from 'ember';
const {computed, get, isEmpty, isBlank, set} = Ember;

export default Ember.Component.extend({
  items: [],
  firstItem: null,
  lastItem: null,
  currentItem: null,
  
  addItem(item){
				let items = get(this, 'items');

        if(!items.findBy('slug', get(item, 'slug'))){
            if (!get(this, 'firstItem')) {
                set(this, 'firstItem', item);
            }

            if (!get(this, 'currentItem')) {
              	console.log('firstItem');
                set(this, 'currentItem', item);
            }

            set(this, 'lastItem', item);

            get(this, 'items').addObject(item);
        }
	},
  
  initCurrentItem(){

        let slug = get(this, 'currentItemSlug');
        let item = get(this, 'items').findBy('slug', slug);
      

        if(item){
            set(this, 'currentItem', item);
        }

    },
  
  didInsertElement() {
        this._super(...arguments);

        this.initCurrentItem();
        set(this, '_hasRendered', true);
  },
  
  actions: {
  			'register-item-component'(item) {
            this.addItem(item);
        },
    
    		'transition-to-slug'(slug) {
            console.log('ok');
        },
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
   this.route('another-route');
});

export default Router;

routes.another-route.js

import Ember from 'ember';

export default Ember.Route.extend({
});

templates.another-route.hbs

Another route

templates.application.hbs

<h1>Welcome to {{appName}}</h1>

{{#link-to 'index'}}Index{{/link-to}}
{{#link-to 'another-route'}}Another route{{/link-to}}
<br>
<br>
{{outlet}}

templates.components.my-component-item.hbs

{{#if isActive}}
    {{yield}}
{{/if}}

templates.components.my-component.hbs

{{yield (hash
    item=(
        component 'my-component-item'
        register-item=(action 'register-item-component')
        manager=this
    )
    transition-to-slug=(action 'transition-to-slug')
    currentItem=currentItem
    firstItem=firstItem
    lastItem=lastItem
    steps=(if _hasRendered steps)
)}}

templates.index.hbs

Index route
<br />
{{#my-component 

currentItemSlug="first" 

as |c|}}
	{{#c.item name="first"}}
  	My first item
  {{/c.item}}
  {{#c.item name="second"}}
  	My second item
  {{/c.item}}

  {{log currentItem}}
{{/my-component}}

twiddle.json

{
  "version": "0.13.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3"
  }
}