a blog for those who code

Tuesday 9 August 2016

Create a ToDo App in Ember.js - Part 1

In this post we will be discussing about creating a To-Do Application in Ember. As you all know with simple syntax and an emphasis on reuse and components, this JavaScript framework i.e. Ember.js can make it very easy to create interactive pages. We will be using some of the important features of Ember.js to create a To Do Application in this post.

If you are not familiar with Ember.js or if you are just starting your journey with this awesome framework, I would suggest you to kindly go through Ember.js - A JavaScript Framework to Create Web Applications where you will get an idea about Ember.js, how to install it and how to start a new Ember application.

Start a new Ember Application - TodoApp

For creating an application you need to run ember new TodoApp as shown below :

Our Application will look like below where we will will show all our Todos. If any of the Todo is completed we will place a line through text to denote that its a completed todo otherwise it will be shown as a normal text. We will also have the features like creating new todo and to edit the existing todo in our application.

Creating Routes

Our next task is to create Routes. The first route will be todos which will list out all the todos in our application. Then we will create two subroutes new (for creating new todo) and edit (for editing existing todo). Our edit todo will be a dynamic route because we want to provide the id of the todo which has to be edited. You can go through Getting started with Routing in Ember.js for more information about routes and subroutes.

We will be creating route todos and nested route for new and edit as shown below:

ember generate route todos --pod 
ember generate route todos/(new or edit) --pod

We also have to update our router with the following code because our edit route should be dynamic and it should take id parameter to update

Router.map(function() {
  this.route('todos', function() {
    this.route('edit', {path : '/edit/:edit_id'});

Adding Local Storage Apadter

Next thing is to install a Local Storage Adapter where we will keep all our data. We will be using ember-localstorage-adapter which can be installed using the below command

ember install ember-localstorage-adapter

Then we will be generating an adapter by using the command

ember generate adapter application

We will be going to replace the contents of the application.js file with the below code

import LSAdapter from 'ember-localstorage-adapter';

export default LSAdapter.extend({
  namespace: 'todo-app'

Adding Models

Next we will be creating a model (todo) which will represent the underlying data that our application will present to the user. For more information about ember please go through Getting Started with Ember Models. We will be generating the model as ember generate model todo and adding the below contents to it

import Model from 'ember-data/model';
import attr from 'ember-data/attr';

export default Model.extend({
  title: attr('string'),
  isCompleted: attr('boolean')

So from the above code we have created our model which has two parameter title with datatype string and isCompleted with datatype boolean.

To Be Continued ...

Now ember framework for our ToDo App is ready. In our next post we will be adding a component and will be changing our route.js and template.hbs files. 

Please Like and Share the CodingDefined Blog, if you find it interesting and helpful.

No comments:

Post a Comment