Ember Composable Helpers

In this article, we will look into what are Ember Composable Helpers and how are those useful but before that let's have a look at what are helpers in Ember.js What is a Helper?Helpers in Ember.js can be module or function that provides templates with the ability to have additional functionality. They help in formatting the data as required by the template. ExampleLet's consider an example: We have a list of arrays of movies as given below: /** This is an array of objects of movies **/ const movies=[ { name:"Joker", isSuccessful:true }, { name:"Titanic", isSuccessful:true }, { name:"The

Ember custom Truth helpers and Handlebar

Ember uses the Handlebars templating library for 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 helps you to add additional functionality to your templates beyond what is included out-of-the-box in Ember. Helpers are most useful to transform raw values from models and components into a format more appropriate for your users.

Sublime for Programmers - JavaScript and JS Frameworks

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 source technologies are familiar with Sublime Text editor very well. However, people who are new to open

Similarities between Ember FactoryGuy and rails FactoryGirl

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 FactoryGirl to create such test data using factories. Same way ember has FactoryGuy. Ember's

How does Ember Boot? Part 2

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 instance. In Ember each app instance maintains their own registry/container, so they will

How does Ember Boot?

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 was born. It was developed by a Rails developer Yehuda

Photo upload from phone-gallery or phone-camera in Ember-Cordova Application

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 us to upload images from phone-gallery, but does not allows us to use phone-camera to take a pic and upload it. (Note: In

Ember.js: How to track last visited route?

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 Ember from 'ember'; export

Ember.js: Create link to div on another page using link-to helper

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

Launch your website as mobile web application

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 mobile-browsers. So we did it in following: For Android Users: In your main page