New Twiddle

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  
  buttons: [{
		title: "title",
		action: function (button) {
			console.log("buttons[0].action", button);
		}
	}, {
		title: "title",
		action: function (button) {
			console.log("buttons[1].action", button);
		}
	}],
	
	action: function () {
		console.log("action", button);

	},
	
	actions: {
		action: function (button) {
			console.log("actions.action", button);
		}
	}
  
});

application.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  
  buttons: [{
		title: "title",
		action: function (button) {
			console.log("buttons[0].action", button);
		}
	}, {
		title: "title",
		action: function (button) {
			console.log("buttons[1].action", button);
		}
	}],
	
	action: function () {
		console.log("action", button);

	},
	
	actions: {
		action: function (button) {
			console.log("actions.action", button);
		}
	}
  
});

application.template.hbs

<h1>Example</h1>

    <p>
    <strong>\{{action action}}</strong> invokes App.NavigationComponent.action
    </p>
    <ul>
        {{#each buttons as |button|}}
        <li><button {{action action button}}>{{button.title}}</button></li>
        {{/each}}
    </ul>

    <hr/>

    <p>
      <strong>\{{action button.action\}}</strong> invokes App.NavigationComponent.actions.action when it
      <strong>
      	It looks like it should invoke App.NavigationComponent.button[index].action
      </strong>
    </p>
    <ul>
        {{#each buttons as |button|}}
        <li><button {{action button.action button}}>{{button.title}}</button></li>
        {{/each}}
    </ul>

    <p>
      Is the reason for this behavior backwards compatibility, technical, or just intentionally designed this way for some reason that escapes me?
    </p>

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle'
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>

twiddle.json

{
  "version": "0.4.0",
  "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.5/ember.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.5/ember-data.js"
  }
}