Ember Error Handling

components.detailed-view.js

import Ember from 'ember';

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

components.header-component.js

import Ember from 'ember';

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

components.my-component.js

import Ember from 'ember';
import {objectHasProps} from './../helpers/object-has-props';
export default Ember.Component.extend({
  tempData: ' temp',
  init(){
    this._super(...arguments);
    console.log('init my-component');
  },
  isEnabled:Ember.computed('reportId',function(){
    return this.get('reportId') === 1;
  }),
  show:Ember.computed('isEnabled','selectedObjectDetails',function(){
    return objectHasProps([this.get('selectedObjectDetails')]) && this.get('isEnabled');
  }),
  actions:{
    changeData(){
      console.log('changeData');
      this.set('changeData','Hi Hi');
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  selectedObjectDetails:{},
  init(){
    this._super(...arguments);
    this.set('columns',['1','2']);
  },
  
  actions:{
    setSelectedObjectDetails(){
      console.log(' setSelectedObjectDetails');
    },
    initControllerToInitialState(){
      console.log(' initControllerToInitialState');
      this.set('selectedObjectDetails',{});
    },
    test(){
      console.log('test');
    }
  }
});

helpers.object-has-props.js

import Ember from 'ember';

export function objectHasProps([value, ...rest] /*, hash*/ ) {
    Ember.assert(' objectHasProps it requires one parameters and that should be type of object', (typeof(value) === 'object'));
  console.log(' hi ');
    return Object.keys(value).length > 0;
}

export default Ember.Helper.helper(objectHasProps);

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model(){
    return [{1:'one'},{2:'two'}]
  },
  setupController(controller,model){
    this._super(...arguments);
    console.log('setupContrioller');
    this.set('reportId',1);
    this.set('selectedObjectDetails',{});
  },
  deactivate(){
    this._super(...arguments);
    this.contoller.send('initControllerToInitialState');
  }
});

templates.application.hbs

<h1 {{action 'test' }}>Welcome to {{appName}}</h1>
<br>
{{my-component model=model reportId=reportId columns=columns selectedObjectDetails=selectedObjectDetails setSelectedObjectDetails=(action 'setSelectedObjectDetails')}}
<br>
{{outlet}}
<br>
<br>

templates.components.detailed-view.hbs

{{log 'selectedObjectDetails detailed ' (object-has-props selectedObjectDetails)}}
{{#if (object-has-props selectedObjectDetails)}}
 DetailedView
 {{/if}}
{{yield}}

templates.components.header-component.hbs

Header Component
{{yield}}

templates.components.my-component.hbs

My-Component
{{header-component }}
<table>
{{tempData}} <button {{action 'changeData'}}>Change</button>
{{#each model as |temp|}}
	<tr>
  {{#each columns as |temp1|}}
	<td class={{if isEnabled 'enabled' ''}} title={{if isEnabled 'enabled' ''}} {{if isEnabled (action setSelectedObjectDetails '') ''}}>
   {{get temp temp1}}
  </td>
  {{/each}}
  </tr>
 {{/each}} 
</table>
{{log 'selectedObjectDetails ' (object-has-props selectedObjectDetails)}}
{{#if show}}
  {{detailed-view reportId=reportId selectedObjectDetails=selectedObjectDetails setSelectedObjectDetails=(action 'setSelectedObjectDetails') }}
 {{/if}}
{{yield}}

twiddle.json

{
  "version": "0.10.7",
  "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.10.0",
    "ember-data": "2.10.0",
    "ember-template-compiler": "2.10.0",
    "ember-testing": "2.10.0"
  },
  "addons": {}
}