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

Advertisements

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