Ember js – Coding Standards

app.js

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.resource(‘if’);
this.resource(‘ifelse’);
this.resource(’emberEg’);
this.resource(’emberImage’);
this.resource(’emberClick’);
this.resource(’emberAction’);
this.route(“each”,{ path:”/favs”}); // changing route to path favs
this.resource(‘renderTemp’);
});

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”
},
{
id:3,name:”xyz”
}];
}
});
App.IfRoute = Ember.Route.extend({
model:function(){
return {author:true,firstName:”ReDIM”,lastName:”Chennai”};

}
});

App.IfelseRoute = Ember.Route.extend({
model:function(){
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);
},
model:function(){
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);
}
}
});

index.html

<!DOCTYPE html>
<html>
<head>
<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>–>
</head>
<body>
<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>

</ul>
</div>

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

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

</script>

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

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

</div>

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

</div>
<button {{action ‘contract’}}>Contract</button>
{{else}}
<button {{action ‘expand’}}>Show More…</button>
{{/if}}
</script>
<script type=”text/x-handlebars” id=”renderTemp”>
</script>
<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>
</body>
</html>

Output:

21-07-2014 12-49-53

You can download the source from here.

 

Advertisements

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