Sajt_1

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  model: [
    {id: 1,
     name: 'First',
     extra: 'First extra'
    },
    {
      id: 2,
      name: 'Second',
      extra: 'Second extra'
    }
  ],	
  actions: {
    showMatch(match) {
      this.set('model', this.get('model').map(function(currmatch) {
        currmatch.showExtra = (currmatch.id === match.id);
        console.log(currmatch.id, match.id)
        return currmatch;
      }));
    }
  }
});
	

templates.application.hbs

 <table class="table table-striped" border="1">
  <thead>
    <th>Name</th>
  </thead>
  <tbody>
  {{#each model as |match|}}
    <tr>
      <td><a href="#" {{action "showMatch" match}}>{{match.name}}</a></td>
    </tr>
    {{#if match.showExtra}}
    <tr>
      <td colspan="1">
        <table class="table table-striped">
          <tr><th>Away</th><td>{{match.extral}}</td></tr>
        </table>
      </td>
    </tr>
    {{/if}}
  {{/each}}
  </tbody>
</table>

twiddle.json

{
  "version": "0.4.8",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.8/ember.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.9/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.8/ember-template-compiler.js"
  }
}