Ember js – Coding Standards


App = Ember.Application.create(); // to create an application

App.Router.map(function(){ // to define a router

this.resource(‘each’); // mentioning route for each template in index.html
this.route(“each”,{ path:”/favs”}); // changing route to path favs

App.EachRoute = Ember.Route.extend({ // each template should have only EachRoute(naming conventions)
model:function(){                            // creating a model in EachRoute. Template will always be backed by model.
return [{                                               // returning an array with id and name
id:1,name:”sathya manoj”
id:2,name:”ram kumar”
App.IfRoute = Ember.Route.extend({
return {author:true,firstName:”ReDIM”,lastName:”Chennai”};


App.IfelseRoute = Ember.Route.extend({
return {author:false,firstName:”ReDIM”,lastName:”Chennai”};

//renderTemplate: function() {                // rendering a  template named renderTemp instead of IfElse. This is not working right now
// this.render(‘renderTemp’);
App.AvatarImage = Ember.View.extend({  // image display
attributeBindings: [‘src’, ‘alt’],
src: ‘images/2.png’,
alt: ‘avatar’,
tagName: ‘img’
App.ClickableView = Ember.View.extend({
click: function(evt) {
alert(“ClickableView was clicked!”);
App.EmberActionRoute = Ember.Route.extend({

setupController: function(PostController, model) { //controller and model defined in route
PostController.set(‘model’, model);
return {
intro:”Some title with content”,body:”this is the content of the body”


App.PostController = Ember.ObjectController.extend({
// initial value
isExpanded: false,

actions: {
expand: function() {
this.set(‘isExpanded’, true);

contract: function() {
this.set(‘isExpanded’, false);


<!DOCTYPE html>
<meta charset=”utf-8″>
<title>Ember Basics</title>
<link rel=”stylesheet” href=”css/normalize.css”>
<link rel=”stylesheet” href=”css/style.css”>
<link href=”http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css&#8221; rel=”stylesheet”>
<!–<link rel=”stylesheet” href=”bootstrap/css/bootstrap.min.css”>
<script src=”bootstrap/js/bootstrap.min.js”></script>–>
<script type=”text/x-handlebars”>
<div class=”navbar”>
<div class=”navbar-inner”> <!– will display a menu bar with following links–>
<a class=”brand” href=”#”>Ember JS & Handle Bars</a>
<ul class=”nav”>
<li>{{#link-to ‘each’}}Each{{/link-to}}</li>
<li>{{#link-to ‘if’}}If{{/link-to}}</li>
<li>{{#link-to ‘ifelse’}}IfElse{{/link-to}}</li>
<li>{{#link-to ’emberEg’}}Ember Example1{{/link-to}}</li>
<li>{{#link-to ’emberImage’}}Ember Image{{/link-to}}</li>
<li>{{#link-to ’emberClick’}}Ember Click{{/link-to}}</li>
<li>{{#link-to ’emberAction’}}Ember Action{{/link-to}}</li>
<li>{{#link-to ‘renderTemp’}}Render{{/link-to}}</li>


{{outlet}} // will help to display other templates in default application template when it is called.
<script type=”text/x-handlebars” id=”each”> // each template
<ul class=”people_list”>
{{#each }}
<li>{{name}}</li> // displaying values that are returning by model

<script type=”text/x-handlebars” id=”if”> // if template
{{#if author}}
<h4>{{firstName}} {{lastName}}</h4>


<script type=”text/x-handlebars” id=”ifelse”> // ifelse template
{{#if author}}
<h4>{{firstName}} {{lastName}}</h4>
<h4>Unknown Author</h4>
<script type=”text/x-handlebars” id=”emberEg”>//ember example
{{input type=”text” value=name placeholder=”Enter your name”}}
<div class=”text”>
<h4>My name is {{name}} and I want to learn Ember!</h4>
<script type=”text/x-handlebars” id=”emberImage”>// ember image
<div id=”logo”>
{{view App.AvatarImage}}
<script type=”text/x-handlebars” id=”emberClick”> // ember click
{{#view App.ClickableView}}
This is a clickable area!

<script type=”text/x-handlebars” id=”emberAction”>//ember action
<div class=’intro’>


{{#if isExpanded}}
<div class=’body’>{{body}}

<button {{action ‘contract’}}>Contract</button>
<button {{action ‘expand’}}>Show More…</button>
<script type=”text/x-handlebars” id=”renderTemp”>
<script src=”js/libs/jquery-1.10.2.js”></script>
<script src=”js/libs/handlebars-1.1.2.js”></script>
<script src=”js/libs/ember-1.6.1.js”></script>
<script src=”js/ember-data.js”></script>
<script src=”js/app.js”></script>
<script src=”http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js”></script&gt;
<script src=”http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js”></script&gt;
<!– to activate the test runner, add the “?test” query string parameter –>
<script src=”tests/runner.js”></script>


21-07-2014 12-49-53

You can download the source from here.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s