Let’s Learn Ember – Computed Properties


Computed Property is one of the interesting feature that Ember provides which helps the users build a clean Javascript interface. As defined by Ember in its official website, a computed property lets you declare a function as a property. As we create a computed property as a function, whenever we call this property, Ember will automatically invoke this function and treat its return value as the value of the computed property.


In the example illustrated below, we have created a computed property called “fullName”, which depends upon the other two properties “firstName” and “lastName”.

In the above example, we have created a computed property “fullName” by injecting property method to the function so that this function will be declared as a property. The parameters “firstName” and “lastName” passed to this function (computed property) denote that the value of this property depends upon these two properties. Whenever we access this computed property “fullName”, this function will be called , which will in turn gets the properties ‘firstName’ and ‘lastName’ and returns the value.


One interesting feature to note here is that whenever there is any change to the properties that the computed properties depend upon, the value of the computed properties is dynamically updated upon their invocation. This is illustrated in the example below.

Example - Computed Properties

So, we observed that computed properties help to relieve the server load to some extent, as it does not generate the content based on the properties. The server need not render all the data as the data is manipulated and new content are created based on them. The usefulness of computed properties will be accentuated while using templates, which we will cover in later chapters.

So, in this post, I gave an overview on the computed properties, illustrated with an example.

In the upcoming post, we will look into Observers.

Till then, Happy Coding!! 🙂


Let’s Learn Ember – The Ember Object Model

In this post, I will delve into the Ember Object model.

Ember has adopted more of an object-oriented model unlike Javascript. The Ember.Object is the main class for all the Ember objects from which all the almost every object in Ember.js is derived. This Ember.Object is the basis for creating all the views, controllers, models and the application itself. Consequently, all the objects share the same core capabilities as they all have been derived from a same object.


Now let’s create a new object in Ember. For that, we just need to use the function create() of Ember.Object class as shown below.


If an object literal is passed to the create() method (which is totally optional), then it is defined as the properties on that instantiated object. In the above example, we have defined a property called “message” and passed it value “Hello World”. Even though, we are just creating a simple Ember object with a single defined property, if we look up this object “emberObject” in the browser console, we can see that there is a lot more going on behind the scenes. Continue reading

Let’s Learn Ember – Installation and Bootstrap

This is the second post in my “Let’s Learn Ember” series. In this post, I will provide an overview on how easy it is to install and bootstrap to get the Ember up and running, without any hassle. That’s the only easy part though!. 😉

Here are the steps that you need to do in order to bootstrap Ember.

  1. Download the dependencies.
    • Get the latest version of JQuery from here, preferably the compressed production version.
    • Get the handlebars from its official website here.
    • Get ember from its official website here. Get the full version for development purposes which contains development helpers that give helpful information if anything goes wrong. You can opt for the minified version for the production.
  2. Bootstrap simple code. In other words, let’s create a “Hello World” for ember. Continue reading

Let’s Learn Ember – What is Ember.js?

As of today, I am planning to tutor myself “Ember.js”, delving into the basic concepts, components and architecture, followed by hands-on samples and projects. As a result, I intend this post to be the first one in my “Let’s Learn Ember” series.

So what is Ember.js?

As stated on it’s official website, Ember.js is a “Javascript framework for creating ambitious web applications that eliminates boilerplate and provides a standard application architecture”. In simple words, it is one of the many frameworks already available for  creating rich client-side applications. Pioneered by Yehuda Katz and Tom Dale , who have much experience in the open source projects like Ruby on Rails, JQuery and SproutCore. In fact, Ember.js sprung out of the SproutCore projects, which is a javascript Model-View-Controller framework that enables one to write rich internet applications with a desktop-like feel.

And why should I use Ember.js?

As mentioned previously, there are already a lot of client-side MVC frameworks in the market such as Backbone.js, Anjular JS, KnockoutJS and many more, listed here. So, it would be common for anyone to ponder why should one choose this particular framework. Continue reading