a blog for those who code

Wednesday 10 August 2016

Create a ToDo App in Ember.js - Part 2

This post is the continuation of Create a ToDo App in Ember.js - Part 1 where we will be discussing further to create a ToDo Application in Ember.js. In the previous post we have already created a new Ember application and added Routes, Data Adapter and also Models. In this post we will be adding components and design our single page application.


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.

Display Todo's


Our next task is to change the todos's route.js and template.hbs to show all our todos whenever our application loads

Todo's Route.js : From where we will return all the todo from the store (data adapter)

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.store.findAll('todo');
  }
});

Todo's template.hbs : Where we will be looping through all the todos and if it is completed we will be adding the class completed to it. You also have to install bootstrap using command ember install ember-bootstrap.

<div class="container">
<div class="jumbotron">
  <h2 id="title">Todo Application in Ember.JS</h2>
</div>
<div class="row">
  <div class="col-sm-5">
    <h3>Todos</h3>
    <ul class="list-group">
      {{#each model as |todo|}}
{{#link-to 'todos.edit' todo}}
 <li class="list-group-item {{if todo.isCompleted 'completed'}}">{{todo.title}}</li>
{{/link-to}}
      {{/each}}
    </ul>
  </div>
  <div class="col-sm-7">
    {{outlet}}
  </div>
</div>
</div>

In our app.css file we will add the class completed as shown below

.completed {
  text-decoration: line-through;
}

Creating Components


Once we are ready with the todos template we will be going to create a Component for our application i.e. todo-editor. Components must have at least one dash in their name, so todo-editor is an acceptable name because in that way Ember detects the components automatically. Generate component using the below command

ember generate component todo-editor --pod


In our component.js file we will be creating an action name save which will be saving our todo for both new and edit. The full code is shown below

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    save: function(model) {
      var component = this;
      model.save().then(function() {
console.log('Todo Saved');
component.sendAction('handleRedirect');
      });
    } 
  }
});

As you can see in the above code we are first saving the model and then sending the action named 'handleRedirect'. This will allow our application to know that todo is saved and we can redirect or we can do other things. Thus component allows us to send actions specified when the component is used in a template.

Next is to modify Components template.hbs file. There we will have a textfield for getting the name of the todo, a checkbox to say the todo is completed or not and a button to save the todo.

<div class="form-group">
  <div clss="col-sm-3">
    <label for="title">Title: {{input value=todo.title id="title"}}</label>
  </div>
</div>
<div class="form-group">
  <div clss="col-sm-3">
    <label for="completed">Completed: {{input type='checkbox' checked=todo.isCompleted id="completed"}}</label>
  </div>
</div>
<button class="btn btn-success" {{action 'save' todo}}>Save Todo</button>
{{yield}}

The only thing pending for us to modify the new and edit sub routes.

Modify New Subroute


We are going to change our route.js for the new sub-route as shown below where we will be creating a record in our data store and then we have an action called displayTodos which will take us to the main page.

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.store.createRecord('todo');
  },
  actions: {
    displayTodos: function() {
      this.transitionTo('todos');
    } 
  }
});

Our template.hbs will have only one line where we will be calling the todo-editor as shown below. As you can see in the below code we will be passing an action (displayTodos) to handleRedirect in which once the todo is saved we will redirect it to the main page

{{#todo-editor todo=model handleRedirect='displayTodos'}}{{/todo-editor}}

Modify Edit Subroute


We will be changing our route.js for the edit sub-route as shown below where we will be finding the record based on the id of the todo to edit. Same as new sub-route here all we have an action called displayTodos which will take us to the main page.

import Ember from 'ember';

export default Ember.Route.extend({
  model: function(params) {
    return this.store.findRecord('todo', params.id);
  },
  actions: {
    displayTodos: function() {
      this.transitionTo('todos');
    } 
  }
}); 

Our template.hbs file will look like below

{{#todo-editor todo=model}}{{/todo-editor}}

Git Hub Repository : https://github.com/codingdefined/Ember-Todo-App

Todo App Demo



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

No comments:

Post a Comment