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('new');
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