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

 

 

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