New Twiddle

components.frost-tab.js

import Ember from 'ember';

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

components.frost-tabs.js

import Ember from 'ember';

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

components.my-button.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'button',
  
  click() {
  	this.onClick(this.get('id'))
  }
});

components.my-content.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  displayName: Ember.computed('selectedLink', function() {
  	return this.get('selectedLink.name')
  })
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  buttonId: null,
  
  selectedLinks: Ember.A([
    {id: 1, name: 'number 1'},
    {id: 2, name: 'number 2'},
 		{id: 3, name: 'number 3'},
    {id: 4, name: 'number 4'}
  ]),
  
  selectedLink: Ember.computed('buttonId', function () {
  	return this.get('selectedLinks').find((link) => {
    	return link.id === this.get('buttonId') 
    })
  }),
  
  actions: {
  	handleClick(id) {
    	this.set('buttonId', id)
    }
  }
});

helpers.array.js

/**
 * array helper
 * Temporary fix until the following bug is resolved: https://github.com/emberjs/ember.js/issues/14264
 */
import Ember from 'ember'
const {A, Helper} = Ember
const {helper} = Helper

export function array (params) {
  let array = A()
  array.pushObjects(params)
  return array
}

export default helper(array)

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
<div> selected name{{selectedLink.name}}</div>

{{my-button id=1 onClick=(action 'handleClick')}}
{{my-button id=2 onClick=(action 'handleClick')}}
{{my-button id=3 onClick=(action 'handleClick')}}
{{my-button id=4 onClick=(action 'handleClick')}}


{{frost-tabs
	tabs=(array 
  	(component 'frost-tab'
    	content=(component 'my-content'
        selectedLink=selectedLink 
      )
    )
    (component 'frost-tab'
  		content=(component 'my-content'
        selectedLink=selectedLink 
      )
    )
  )
}}


{{outlet}}
<br>
<br>

templates.components.frost-tab.hbs

frost-tab template
{{component content}}

templates.components.frost-tabs.hbs

frost tabs tamplate

{{#each tabs as |tab|}}
	{{component tab}}
{{/each}}

{{yield}}

templates.components.my-button.hbs

my button {{id}} 
{{yield}}

templates.components.my-content.hbs

my-content template: {{displayName}}

{{yield}}

twiddle.json

{
  "version": "0.12.1",
  "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.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}