Ember uses the Handlebars templating library to power your app's user interface. Handlebars templates contain static HTML and dynamic content. It uses data-bindings for dynamic contents.

For more details you can check ember documentation: Handlebar Documentation

Helpers: Helpers are functions that are designed to help you control the way your data is rendered by the template in the browser for the client to view. Helpers allow you to add additional functionality to your templates beyond what…

Read complete blog post

These days Javascript frameworks are part of, most of the development projects. We have to work on various JS frameworks over the period. Having good extensions/plugins added to our editor really makes our life easy and improve developer's development speed. So here I am listing some of the Sublime Text editor packages which are must for JavaScript and JS framework based projects.

We use Sublime Text editor in our organization in most of the projects. Generally, people who are working in open…

Read complete blog post

While working with any application, testing plays most important role. Data is main requirement for writing proper test cases. We need different kind of data to test complex features and here factories plays important role.

Data factory is blueprint that allows us to create an object, or a collection of objects, with predefined set of values. Factories makes it easy for us to define different kind of data.

In rails or ember we create model object to write test cases. In rails many of us use…

Read complete blog post

This is part 2 of 'How does Ember Boot?'. If you haven't read 'How does Ember Boot?' part 1 you might consider reading it first.

In the last article our main focus was Ember.Application which is sort of static part of Ember boot process. Now we will look into didBecomeReady() and Ember.ApplicationInstance. Which deals with initialization and creation of instances. Ember.Application is called only once but Ember.ApplicationInstance can be n number of times based on number of requests for the…

Read complete blog post

I will be showing the steps Ember takes to startup before you start seeing your page rendered in the browser. There is a lot of steps and packages involved in this process but I'll try to make it as simple and compact as possible. Following snippet shows the steps in brief which I will be explaining in detail as we proceed.

Ember has evolved from being the SproutCore 2.0 framework to a modern trusted Javascript framework used by major tech companies like Apple, LinkedIn and Vine, ever since it…

Read complete blog post

Currently am working on Ember Application, and for the same we have also developed cordova application using ember-cli-cordova plugin https://github.com/poetic/ember-cli-cordova

In this application, we have a photo upload feature. Using cloudinary.js, we upload it directly to cloudinary on photo-selection.

In web-application, we have added a hidden file input field, and on-click of "Add Image" button, we triggered click event on that file-input.

In Cordova-App, It works fine and just allows…

Read complete blog post

Recently, I added a global search feature in out Ember Application. As it was a global search, it was linked from most of the pages of the application User can click on search icon in the right-top corner and he will be redirected to search page.
But now how to go back to the page we came from? as User can go to search from any of the page of the application.

Here we will see how we can know about last visited route in ember application. We can find our previous route as follows:


Read complete blog post

In simple html pages, we can easily create link to div tag or any other tag on same page and even on different pages.
For example:

Heading Text

Refer it as:

Link text

Now how we can achieve it in Ember.js using {{link-to}} helper?

Lets take as example:

-> Consider we have a page "/faq" and it has following content:



What kinds of items can be donated?


-> Now we want to visit page "faq" and scroll it down to the above question.

-> Simply, we can achieve it using


Read complete blog post

Are you looking for way to launch your website as a web-app for mobile users? Yes it's possbile..

Recently, I am developing an ember.js application. We are using ember.js (using ember-cli) in our client application and in backend we are using ruby-on-rails.

Here we are designing our ember app for mobile users, developing it's UI more responsive for all mobile, tablet and desktop users.

Now along with that we want our users to use it like a web-application instead of just browsing it on…

Read complete blog post

One of the distinguishing features of Ember is the heavy emphasis it puts on URLs. In many other frameworks, having separate URLs for separate screens is either lacking or is tacked on as an afterthought. In Ember, the router is the component that manages urls and transitions between them.

Ember Routing Guides: http://emberjs.com/guides/routing/(link)
Ember.Route class details: http://emberjs.com/api/classes/Ember.Route.html(link)

Here we will take a look at different ways of adding routes:

Read complete blog post

Ember computed property is the most powerful thing ember has and here we are going to get overview of how we can make use of these properties.
Ember guides has explained it very nice way, and here I would like to add some more..

Bind property to nested resources

Many times we need to depend on nested resources for ex: Find the count of comments or likes for post OR find number of items in cart etc. Here we want to update property as its nested resource is changed.

Consider example: here we…

Read complete blog post

Easy way to create a numeric input, which accepts only numbers (i.e. 0-9 and no other characters).


import Ember from 'ember';

export default Ember.TextField.extend({
  tagName: "input",
  type: "number",
  attributeBindings: [ "name", "type", "value", "maxlength", "id" ],
  keyDown: function(e) {
    var key = e.charCode || e.keyCode || 0;
    // allow enter, backspace, tab, delete, numbers, keypad numbers, home, end only.
    return (
      key === 13 ||

Read complete blog post

Timeago is a widely used jQuery plugin which makes it easy to support automatically updating timestamps. (ex: 2 minutes ago)

plugin documentation: http://timeago.yarp.com/(link)

Now we will see how to integrate timeago jquery plugin in ember application.
(Here we will give example using ember-cli)

install jquery-timeago plugin using bower

bower install jquery-timeago

In Brocfile.js


Create Ember Component to

Read complete blog post