Testing keyup

application.controller.js

import Ember from 'ember';

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

application.template.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
{{todo-list}}
<br>
<br>

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.todo-item {
  background:#ededed;
  margin-bottom: 4px;
}

.todo-item .active {
  background: yellow;
}

todo-input

import Ember from 'ember';

export default Ember.TextField.extend({
  keyUp:function(event){
    this.sendAction('upKeyAction', event); 
  }
})

todo-input.component.js

import Ember from 'ember';

const {computed} = Ember;
export default Ember.TextField.extend({
  consumerTest: Ember.on('init', function() {
    
  	console.log(this.get('isFocused'))
  }),
  keyDown:function(event){
    
    this._super(event);
    if (event.keyCode === 38 || event.keyCode === 40 ) {    
	    this.attrs.handleKeyPress(event.keyCode)
    }
  },
  focusInput: computed('isFocused', 	function(){
    console.log('focus')
  	this.$().focus();  
	}),
})

todo-item.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  isActive: Ember.computed.alias('todo.isActive'),
  classNames:['todo-item'],
  checkKeyPress() {
    console.log('fired')
  },
  actions: {
    handleKeyPress(key) {
      // 38 up, 40 down
      if(key === 38) {
      	this.attrs.onkeyUp(this.get('todo'))
      } else if (key === 40) {
       this.attrs.onkeyDown(this.get('todo')) 
      }
    }
  }
});

todo-item.template.hbs

<div class="{{if isActive 'active'}}">
{{todo-input value=todo.title handleKeyPress=(action 'handleKeyPress') isFocused=todo.isActive}}
{{isActive}}
</div>

todo-list.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  todos: [
    {
    	title: 'Item 1',
      isActive: true
    },
    {
    	title: 'Item 2',
      isActive: false
    },
    {
    	title: 'Item 2',
      isActive: false
    }
  ],
  currentActiveIndex:0,
  actions: {
  	handleMoveUp(todo) {
			let position = this.get('todos').indexOf(todo);
      if (position === 0) {
        return
      } else {
				this.decrementProperty('currentActiveIndex');
      }
    },
    handleMoveDown(todo) {
    	let position = this.get('todos').indexOf(todo);
      if (position === this.get('todos.length')) {
        return
      } else {
        console.log(todo)
			Ember.set(todo, 'isActive', true);	this.incrementProperty('currentActiveIndex');
      }
    }
  }
});

todo-list.template.hbs

Active Item {{currentActiveIndex}}
{{#each todos as |todo|}}
	{{todo-item todo=todo
  						onkeyUp=(action 'handleMoveUp')
              onkeyDown=(action 'handleMoveDown')}}
{{/each}}

twiddle.json

{
  "version": "0.5.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.2.0/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember-template-compiler.js"
  }
}