How to work with controller from router in ember js

Folks,

We will just wrap up on coding in achieving how to work with controller from router in ember js

Step1:

App.Router.map(function(){
this.resource(‘photos’);
});

Step2:

App.PhotosRoute = Ember.Route.extend({

renderTemplate: function(controller){
this.render(‘photos’, {controller: controller});
}
});

Step3:
App.PhotosController = Ember.ArrayController.extend({
currentIndex: 0,

actions: {
displayPic: function () {

},
previous: function () {
alert(“previous”);
},
next: function () {
alert(“next”);

}
}
});

For examples: Clickhere

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.

 

Ember js – Basics

Folks,

You need to go through this post if you are familiar with ember guide. This is for the people like me who struggles alot while viewing the big menu which makes you feel panic 😉

So iam just warming them with only little documentation that makes them to understand the only basics. Hope its clear.

Still interested?? Then you can follow this article 😛

How to start with? how to configure ember to your application?

Just download the starter kit for now.

You are ready to build your project with ember js now. Just rename the folder from starter kit to your desired name.

Note: Avoid using jquery external plugins etc in JS frameworks which makes you to feel like normal applications which takes time to run app.

We are going to concentrate only on index.html and js/app.js for now.

If you want, you can include bootstrap css which makes good feel of your UI.

<link href=”http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css&#8221; rel=”stylesheet”>

Even you can include the following if at all needed..

<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;

Get..Set..Go

Run your index.html to view list of colors for now.

Let me explain how it works..

In ember js application and index are default controllers,models and templates. If you define something to display in index it works like index.html(a default template)

To start with ember you should define ember like below..

App = Ember.Application.create();

you can have your own name in place of App.

App.IndexRoute = Ember.Route.extend({
model: function() {
return [‘red’, ‘yellow’, ‘blue’];
}
});

From the above code, we created a model which is returning with array of colors.We named it as IndexRoute, hence it should be in index template only. See the below code that explains index template.

<script type=”text/x-handlebars” id=”index”>
<ul>
{{#each item in model}}
<li>{{item}}</li>
{{/each}}
</ul>
</script>

Now, you will get many doubts like what is {{item}} etc etc. we display everything using handle bar templates. We use expressions in handle bar templates {{ expressions}}. We can use helpers like link-to/action/anything for this expressions. Before going to code, its better to be go through the guide or below screenshots. Once after this done, you will understand clearly 😀

1

2 3(1) 3 4 5(1) 5 6 7 8 10 11 12 13

Still, more need to be learn from documentation. Request you to go through the guide

 

 

Ember Js – Introduction

Introduction to Ember:

According to the creators of the framework, Ember.js is “a framework for creating ambitious web applications”. What exactly do they mean? Also, with the many  JavaScript frameworks that we have to choose from these days, why might I choose Ember? In this post, I’ll introduce Ember.js and some of the core concepts that backed its development.

I feel like, ember is a JavaScript Model-View-Controller framework that enables you to write rich internet applications with a desktop-like feel or a single page application.

ember

Basic Concepts
Routes
The router is a core concept of Ember, emphasizing the importance of the URL in managing application state.
Models
Every route has an associated model, containing the data associated with the current state of the application. While one can use jQuery to load JSON objects from a server and use those objects as models, most applications use a model library such as Ember Data to handle this.
Controllers
Controllers are used to decorate models with display logic. A controller typically inherits from ObjectController if the template is associated with a single model record and ArrayController if the template is associated with a list of records.
Templates
Templates are written with the Handlebars templating language to describe the user interface. This handle bars can generate html tags with the related content automatically by using expressions with helpers.
Views
Views are used to add sophisticated handling of user events, custom graphics not made with CSS, JavaScript animations, or reusable behavior to a template.
Components
Components are a specialized view for creating custom elements that can be easily reused in templates.

Now, i guess you might be running with a thought like why i have to choose this when i have lots of JS frameworks like angularjs,backbone js etc. Right? me too got the same doubt..Pls refer below links for the better understanding..

http://eviltrout.com/2013/06/15/ember-vs-angular.html

http://blog.codeschool.com/post/85819292538/angular-backbone-or-ember-which-is-best-for-your

Where to learn??

My suggestion, better do follow with http://emberjs.com/guides/

Reason: I have personally faced lot of trouble while learning and implementing the basics with some other sources like videos, blogs etc. I can define the trouble-the only thing that makes you bother is version management in ember. This ember is revising versions with new API’s regularly where the other internet sources wont help you to make build of application as those are outdated. Hence request you to go through only ember js documentation to learn and implement as i did :).

For more about core concepts documentation and examples pls check the other posts. Thanks