Ember.js Base fiddle

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>Fiddling</h1>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
  {{#each sections}}
    {{#each buttons}}
        {{log 'source in template' ../source}}
        {{component-button source=../source options=this}}
    {{/each}}
  {{/each}}
</script>

<script type="text/x-handlebars" data-template-name="components/component-button">
    {{log 'source in component' source}}
    <button {{action 'options.action'}}>{{options.label}}</button>
</script>

JavaScript

App = Ember.Application.create( {} );

/**
 * Component: Button
 */
App.ButtonComponent = Ember.Component.extend( {
    
  tagName: 'button',

  click: function click() {
    this.get( 'source' ).send( this.get( 'options.action' ) );
  }

} );

/**
 * Controller: Application
 */
App.IndexController = Ember.ObjectController.extend( {

  sections: Ember.A(),

  actions: {
    doSomething: function() {
      window.console.log( 'hooray!' );
    }
  },

  setup: function setup() {
    var source = this;

    var section = Ember.Object.create( {
      source: source,
      buttons: Ember.A( [
        Ember.Object.create( {
          label: 'Do something!',
          action: 'doSomething'
        } )
      ] )
    } );

    this.sections.pushObject( section );

  }.on( 'init' )

} );

App.IndexRoute = Ember.Route.extend({
  model: function(){
      return {name: 'foo'};
  }
});