even-odd items

components.even-odd.js

import Ember from 'ember';

export default Ember.Component.extend({
    numbers: [],

	evenItems: Ember.computed('numbers.[]',  function() {
         return this.get('numbers').filter(function(num){ return num.value % 2 === 0 })
     }),
     oddItems: Ember.computed('numbers.[]',  function(number) {
         return this.get('numbers').filter(function(num){ return num.value % 2 !== 0 ;})
     })
});

controllers.application.js

import Ember from 'ember';

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

routes.application.js

import Ember from 'ember';
var numbers = [ 
		{value: 1, title: 'raju'},
{value: 10, title: 'B'},
{value: 12, title: 'A'},
{value: 11, title: 'NNN'},
{value: 16, title: 'RRKS'},
{value: 19, title: 'MCVDF'},
{value: 21, title: 'MVSDG'},
{value: 51, title: 'TUDFB'},
{value: 54, title: 'FBDFGH'},
{value: 126, title: 'UER'},

]
export default Ember.Route.extend({
	model() {
	return numbers;
    }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
{{even-odd numbers=model}}
<br>
<br>

templates.components.even-odd.hbs

<div class="row">
  <div style="border-bottom: 1px solid grey;">
    <h3 style="display:inline;margin: 25px;color: green;"><b>Even</b></h3>
    <h3 style="display:inline;color: green;">Title</h3>
   </div>
  {{#each evenItems as |number|}}
    <div>
      <h3 style="display:inline;margin: 40px;"><b>{{number.value}}</b></h3>
      <h3 style="display:inline;">{{number.title}}</h3>
     </div>
  {{/each}}
</div>


<div class="row">

  <div style="border-bottom: 1px solid grey;">
    <h3 style="display:inline;margin: 25px;color: green;"><b>Odd</b></h3>
    <h3 style="display:inline;color: green;">Title</h3>
   </div>
{{#each oddItems as |number|}}
  <div>
    <h3 style="display:inline;margin: 40px;"><b>{{number.value}}</b></h3>
    <h3 style="display:inline;">{{number.title}}</h3>
   </div>
{{/each}}
</div>

twiddle.json

{
  "version": "0.9.1",
  "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.6.0",
    "ember-data": "2.6.0",
    "ember-template-compiler": "2.6.0"
  }
}