JavaScript – an indispensable part for developing websites and web pages, whether that is simple pages or professional website. Nowadays, JavaScript frameworks become more powerful and more specialized; they can do many things in just a few basic steps. A Javascript framework is a library of pre-written javascript controls, functions and methods that make it easier for the developer to quickly and accurately produce cross browser compliant code. Example popular frameworks are: YUI, ExtJS, Prototype, MooTools and of course, jQuery.
The massive growth in rich, JavaScript-heavy web applications has lead to a huge array of frameworks designed to help us build apps. There are so many that it can often be difficult to choose which best suits our needs. Most frameworks follow roughly what's known as an MVC pattern: model, views and controllers. Models deal with data, fetching it from databases and returning it. Views then display the data, and controllers link the models and views together.
The massive growth in rich, JavaScript-heavy web applications has lead to a huge array of frameworks designed to help us build apps. There are so many that it can often be difficult to choose which best suits our needs. Most frameworks follow roughly what's known as an MVC pattern: model, views and controllers. Models deal with data, fetching it from databases and returning it. Views then display the data, and controllers link the models and views together.
Ember.js
Unlike the other javascript framework, Ember.js does a lot of work for us, such as code to update the view when model data changes. Ember's main features are its data binding; obejcts in Ember can bind properties to each other, so when a property changes in one object, the other is kept in sync. Another is the ability to define functions on an object that can then treat as properties.
Ember also has more traditional controllers. Views (usually written in Handlebars) provide ways of attaching certain buttons or links to Ember controller actions. Ember.js also gives us helpful tools for managing the state while developing the interactive web applications, in a way to scales the applications.
Getting Started
Below are the core concepts that one need to understand before getting started development of Ember.js app.
Templates
A template, written in the Handlebars templating language, describes the user interface of your application. In addition to plain HTML, templates can contain:
Expressions, like {{firstName}}, which take information from controllers and models, place them into HTML, and automatically keep them updated.
Outlets, which are placeholders for other templates. As your user moves around your app, different templates can be plugged into the outlet by the router. You can put outlets into your template using the {{outlet}} helper.
Views, which are responsible for handling user events. You can put views into your templates using the {{view}} helper.
A template, written in the Handlebars templating language, describes the user interface of your application. In addition to plain HTML, templates can contain:
Expressions, like {{firstName}}, which take information from controllers and models, place them into HTML, and automatically keep them updated.
Outlets, which are placeholders for other templates. As your user moves around your app, different templates can be plugged into the outlet by the router. You can put outlets into your template using the {{outlet}} helper.
Views, which are responsible for handling user events. You can put views into your templates using the {{view}} helper.
Views
A view is embedded inside a template and is responsible for translating primitive events (like clicks, taps, and swipes) into semantic events that have meaning to your application and are sent to the controller.
For example, a view might translate a click event into the more meaningful deleteItem event, which would be sent to the controller. If the controller does not implement the deleteItem event, the event will be sent to the current route.
A view is embedded inside a template and is responsible for translating primitive events (like clicks, taps, and swipes) into semantic events that have meaning to your application and are sent to the controller.
For example, a view might translate a click event into the more meaningful deleteItem event, which would be sent to the controller. If the controller does not implement the deleteItem event, the event will be sent to the current route.
Controllers
A controller is an object that stores application state. Templates are connected to controllers and translate the current state of the controller into HTML.
Controllers often act as representations of models for templates. In these cases, the controller passes the properties of the model to the template, and can transform or augment the model to present it in a way the template is expecting.
A controller is an object that stores application state. Templates are connected to controllers and translate the current state of the controller into HTML.
Controllers often act as representations of models for templates. In these cases, the controller passes the properties of the model to the template, and can transform or augment the model to present it in a way the template is expecting.
Models
A model is an object that stores persistent state. This is the data that your application operates on and what gives it value to your users. These objects are usually loaded from your server, then saved back when changes are made on the client.
Usually, you'll use Ember Data to translate the raw JSON payloads delivered by your API server into full-blown Ember.js objects with associations, computed properties, and more.
A model is an object that stores persistent state. This is the data that your application operates on and what gives it value to your users. These objects are usually loaded from your server, then saved back when changes are made on the client.
Usually, you'll use Ember Data to translate the raw JSON payloads delivered by your API server into full-blown Ember.js objects with associations, computed properties, and more.
Router
The router is the object responsible for managing application state.
When your user starts your application, it will look at the URL and make sure that the right set of templates is displayed, as well as pairing those templates with the right model objects.
As you move around the different states of your application, the router automatically keeps the URL up-to-date. Users can save the URL and re-enter the application at this state later, or share the app in its current state with others.
The router is the object responsible for managing application state.
When your user starts your application, it will look at the URL and make sure that the right set of templates is displayed, as well as pairing those templates with the right model objects.
As you move around the different states of your application, the router automatically keeps the URL up-to-date. Users can save the URL and re-enter the application at this state later, or share the app in its current state with others.
Reference: http://emberjs.com/
