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...

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:

import...

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:

faq.hbs

..

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).

app/components/numeric-input.js

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,...

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

app.import('bower_components/jquery-timeago/jquery.timeago.js');

Create Ember Component to display time format

...

Read complete blog post