component_attribute_binding

components.posts-list.js

import Ember from 'ember';

export default Ember.Component.extend({
  location: "Bangalore"
});

components.test-component.js

import Ember from 'ember';

export default Ember.Component.extend({
    tagName: 'span',
	attributeBindings: ['style'],
  style: Ember.computed(function(){
			var rand1 = Math.floor(Math.random() * 101);
 			if ( rand1 % 2 == 0 ) 
      { 
        	var setColor = "color:blue";
      } 
      else 
      {
        	var setColor = "color:red";
      }
    return setColor;
  })

});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Creating basic component to show attribute binding and changing color for a span, By Default component converts into Div on rendering, here we have changed it to span.'
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
});

export default Router;

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model(){
   return [
     {
       name:"Gaurav Gupta",
       id: "1",
       location: "Bangalore"
     },
     {
       name:"Priyanka Gupta",
       id: "2",
       location: "Mumbai"
     },
     {
       name:"Garima Gupta",
       id: "3",
       location: "Burhanpur"
     }  
     ]
  }
});

templates.application.hbs

<h3>Welcome to {{appName}}</h3>
{{posts-list}}
{{#test-component}}
Gaurav here  
{{/test-component}}
{{outlet}}

templates.components.posts-list.hbs

{{yield}}
<p> Gaurav Gupta</p>
<p> Location: {{location}}</p> 
<hr>

templates.components.test-component.hbs

{{yield}}

twiddle.json

{
  "version": "0.13.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.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3"
  }
}