Input Helpers

components.code-section.js

import Ember from 'ember';

export default Ember.Component.extend({
  eventNotification: Ember.inject.service(),
  click: function(event){
    this.attrs.clickHandler();
    this.get("eventNotification").set("clicked",event);
  },
  actions: {
    changeMine: function(){
  Ember.$("#container").html(Ember.$("#content")[0].innerHTML);
      Ember.$("#content").empty();
    }
  }
});

components.z-button.js

import Ember from 'ember';

export default Ember.Component.extend({
  eventNotification: Ember.inject.service(),
  
  didInsertElement: function(){
  
  Ember.$("#myPara").on("click",function(){
    console.log("My paragraph clicked");
  });
   // console.log(this.get("eventNotification").clicked);
  },
  click: function(){
   // console.log("Inside Click of Component");
  },
  explorerClicked: function(){
  //  console.log("explorer clicked")
  }.observes("eventNotification.clicked")
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  actions: {
    myClickHandler: function(){
    //  console.log("click handler of common controller");
    }
  }
});

services.event-notification.js

import Ember from 'ember';

export default Ember.Service.extend({
  clicked : false
});

templates.application.hbs

<h1>Input Fields</h1>
<br>
<br>

{{z-button}}
{{code-section clickHandler=(action "myClickHandler")}}
{{outlet}}
<br>
<br>

templates.components.code-section.hbs

<h4> Explorer Section </h4>
<button {{action "changeMine"}}>Change Data</button>

<div id="container">
</div>

templates.components.z-button.hbs

<p> Button Component </p>
<h2> Preview Section </h2>
<div id="content" style="display:none;">

	<input id="normalType" type="radio" name="type" />
	<label for="normalType">Normal</label>
	<input id="primaryType" type="radio" name="type" />
	<label for="primaryType">Primary</label>

	<input id="iconType" type="checkbox" value="icon"/>
	<label for="iconType">Icon</label>
	<input id="textType" type="checkbox" value="text"/>
	<label for="textType">Text</label>
  
	<p id="myPara">Click Me!!!</p>
  
</div>

twiddle.json

{
  "version": "0.11.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.10.2",
    "ember-data": "2.11.0",
    "ember-template-compiler": "2.10.2",
    "ember-testing": "2.10.2"
  },
  "addons": {}
}