Ember js – Basics


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;


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”>
{{#each item in model}}

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 😀


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.


Basic Concepts
The router is a core concept of Ember, emphasizing the importance of the URL in managing application state.
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 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 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 are used to add sophisticated handling of user events, custom graphics not made with CSS, JavaScript animations, or reusable behavior to a template.
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..



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