We created a couple of demo apps that are using Mobiscroll components and our version of a TODO App is one of them.
See all demo apps and kitchen sink demos here.

Besides writing demos focused on specific features and configurations we wanted to tackle a “real-life” scenario. So the the app focusing on daily todo’s came about.
This breakdown – if you will – is to illustrate how we implemented the app with Knockout using two Mobiscroll controls, the Calendar and the Listview.
A basic knowledge of Knockout is necessary to fully understand the implementation, however implementing a similar Todo app without knockout is possible as well.
For more on how to get started with Knockout please visit Learn Knockout.

In this demo app we used the Model-View-View Model (MVVM) design pattern and Knockout was our framework of choice. MVVM lets us completely decouple our app logic and data from the UI, so maintenance and changes are super-easy to make. Beside that the UI updates are automatic, whenever the underlying model changes. As Mobiscroll components have custom Knockout bindings, they seamlessly integrate in the MVVM pattern. You will notice that no UI modifications are made in our Javascript code.

We will go through the steps of the creation of the app, first building the parts of the UI, than creating the model with the functionality.

Here is what we’re going to discuss:

The User Interface

• Calendar
• Listview
• Add New Task

The Data Structure and Model

• Properties
• Methods

The User Interface

The Calendar

The calendar is a good choice to get an overview of our to-dos. You can easily navigate with swipe gestures between months and see the days when you have something to do.

To highlight the days we will use the marked property of the calendar, this will indicate that we have a to-do list for that day. Tapping on a marked day will bring up the detailed view of the to-do list. Let’s use the onDayChange event to accomplish that. More on the onDaySelect event handler later.

This is how the calendar initialization looks using the custom Knockout bindings:

1
2
3
4
5
6
7
8
9
10

<div id="calendar" data-bind="
    mobiscroll.calendar: selectedDate,
    mobiscroll.onDayChange: onDaySelect,
    mobiscroll.options: {
        theme: 'ios7-red',
        display: 'inline',
        layout: 'liquid',
        marked: markedDays
        }
"></div>

Simple enough.
You will notice that our calendar looks slightly different than the iOS7 theme. We use a customized version of if built with our Theme Builder called ios7-red.

The Listview

How to display a to-do list properly? Using a list of course. But we also want to be able to modify our list (add/remove/check/uncheck).
Here is where the Mobiscroll Listview comes in picture. It will enhance our basic html list with gestures and allow us to bind certain actions to them.
In our app we will do the following:

• On right swipe we check our task and move it to the end of the list marking it as done.
• On left swipe we remove the task from the list. If it is checked, it will be removed immediately, otherwise needs confirmation.
• On tap we uncheck the item, but only if it is checked.
• We are also able to sort our tasks

To define the left and right swipe actions, we will use the stages property. To define the tap action, we will use the onItemTap event.

The Listview Knockout binding it looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<ul data-bind="
    mobiscroll.listview: currentList,
    mobiscroll.options: {
        theme: 'ios7',
        sort: true,
        iconSlide: true,
        stages: [
            { percent: 20, icon: 'checkmark', color: '#00CC00', action: checkToDo },
            { percent: -20, icon: 'close', color: '#e61300', action: removeToDo, confirm: confirmDelete }
        ]
    },
    mobiscroll.event: {
        onStageChange: stageChange,
        onItemTap: unCheckToDo,
        onSlideEnd: moveDown,
        onSortUpdate: sortUpdate,
        onSortStart: sortStart,
        onSortStop: sortStop
    }
">
    <li data-bind="attr: { 'data-id': $data.id }, css: {'todocross': $data.done}">
        <div class="textdiv">
            <div data-bind="text: $data.text"></div>
            <div class="linediv"></div>
        </div>
    </li>
</ul>

The great thing about using the Knockout binding that we don’t need to maintain the markup of our list at all, we will just modify our data in the action handlers and Knockout with the Mobiscroll binding will do all the heavy lifting.

We will also add a fancy little animation: if we check or uncheck a to-do item, a strike through animation will occur. We could easily strike the text with css text-decoration, but it cannot be animated, so we will use a div with a border placed over the text which than will be animated with css.

The Add New Task Form

We need to add new tasks. Our form will contain a button to toggle the form’s visibility, a single textbox for entering our text, and a button which adds the new item (submits the form). We will bind to the form’s submit event to add the new item, so it will be called if we tap/click on the add button, or press Enter/Go etc. as well.

To show/hide the form, and change the icons on the buttons we will use dynamic css classes using the css binding of the Knockout framework.

The markup of the form with the bindings:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div class="addcontainer">
    <div class="addform" data-bind="css: { addformv: isAddFormVisible }">
        <form data-bind="submit: addToDo">
            <input class="text" data-bind='
                value: toDoText,
                valueUpdate: "afterkeydown",
                hasFocus: isAddFormVisible' />
            <button class="btn btn-check mbsc-lv-ic mbsc-lv-ic-checkmark" data-bind="
                attr: { title: 'Add' }
            "></button>
        </form>
    </div>
 
    <div class="btn btn-add mbsc-lv-ic" data-bind="
        attr: { title: isAddFormVisible() ? 'Cancel' : 'Add' },
        css: { 'mbsc-lv-ic-plus': !isAddFormVisible(), 'mbsc-lv-ic-close': isAddFormVisible , 'btn-cancel': isAddFormVisible },
        click: toggleAddForm
    "></div>
</div>

Once we have the UI elements, let’s move on and create the underlying model and make our app functional.

The Data Structure and Model

All our actions and properties will be encapsulated in a model.

We will store the user’s to-do in the localStorage. In this demo app we will just serialize everything into one JSON string. This might not be the best solution in a real word application, but this is not the purpose of this demo, we just want a simple way to store the data permanently.

A task will have the following properties:

• id – This will be auto-generated
• dueDate – Date
• text – String
• done – Boolean

1
2
3
4
5
6

function Todo(dueDate, text, done) {
    this.id = uniqueID++;
    this.dueDate = dueDate;
    this.text = text;
    this.done = ko.observable(done);
}

If the user does not have any data in the storage, we will create a sample list for today and another one for 4 days later. The items will be stored in an object where the key is the timestamp of the day, and the value is an array with the item objects.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

var d1 = new Date(),
    d2 = new Date(d1.getTime() + 1000 * 60 * 60 * 24 * 4),
 
// Set hour information to 0 to have a
// timestamp of the beginning of the day
d1.setHours(0, 0, 0, 0);
d2.setHours(0, 0, 0, 0);
 
todos[d1] = [
    { dueDate: d1, text: "Check Mobiscroll demos", done: true },
    { dueDate: d1, text: "Feed the pets", done: false },
    { dueDate: d1, text: "Send an invitation email to Emily", done: false },
    { dueDate: d1, text: "Watch the new Arrow episode", done: false },
    { dueDate: d1, text: "Don't forget Margaret's birthday", done: true }
];
todos[d2] = [
    { dueDate: d2, text: "Wash the car", done: false },
    { dueDate: d2, text: "Feed the pets", done: false },
    { dueDate: d2, text: "Call dad", done: false },
    { dueDate: d2, text: "Buy flowers", done: false }
];

Next we will load the data from the storage or, if it’s empty, take the sample data, and create our to-do objects (the constructor will generate an id for each to-do item):

1
2
3
4
5
6
7
8
9
10
11
12
13

var tempList = [],
    tempObj = {};
 
todos = localStorage.todos ? JSON.parse(localStorage.todos) : todos;
$.each(todos, function (i, v) {
    $.each(v, function (index, todo) {
        tempList.push(new Todo(new Date(todo.dueDate), todo.text, todo.done));
    });
    self.markedDays.push(new Date(i));
    tempObj[i] = tempList;
    tempList = [];
});
todos = tempObj;

Now that we have our data initialized, let’s take a look on our model’s properties and methods:

Properties

Methods

Downloads

Go ahead and download the app source and see how it looks all together. You will need to include your Mobiscroll build separately.