April 8, 2015 9:35 am

Fabricating Highly Responsive Mobile Apps Using Total.js and Knockout.js

For those who are a part of web technologies knows jQuery, or at least has heard about them. Its unparalleled features and cutting-edge development solutions make the lives of millions of webmasters easier and faster. But, despite of all its blockbuster functionality, jQuery somewhere gets failed to provide solutions to certain problems.

Fabricating Highly Responsive Mobile Apps Using Total.js and Knockout.js

This is the case when you proceed to build some complex web apps as there is no clear way to design UI or data that communicates with each other. The sub-standard DOM manipulation and events handling provided by jQuery make such functions difficult to achieve. For this you need a library that helps you establish a firm connection between your data model and UI.

And here is the role of Knockout.js and Total.js comes to the scene. They are JavaScript libraries that allow you create feature-rich and highly responsive web apps, which will scale and perform impeccably. They also appear to be huge time saving frameworks for any web or mobile app development company when it comes to build complex models, and automatically update the same. They provide you better ways to enclose data into a view model in order to provide you a clean, extensible structure onto which exemplary UIs can be built without getting struck into DOM manipulation and event handlers.

In this post, we will talk about how Total.js and Knockout.js can be used to build top-notch, responsive web apps. So, without rambling on too much further, let’s begin.

Read Also: 10 Amazing Techniques To Build Beautiful Responsive Web Design

Understanding the Criteria of Total.js

Total.js is based upon model-view-controller model. To get you started all you need is simply place the following code within models/views/controllers folder and you are ready to go. Also, Total.js provides a very simple method of routing wherein you only need to perform mapping declaration on each route of the JavaScript function. Below is the example showcasing a typical RESTful routing function.

exports.install = function(framework) { 
	framework.route('/users', listUsers) 
	framework.route('/users', addUser, ['post']) 
	framework.route('/users/{id}' updateUser, ['put']) 
	framework.route('/users/{id}' deleteUser, ['delete']) 

function listUsers(){} 
function addUser(){} 
function updateUser(id){} 
function deleteUser(id){}

Playing Around the Utilities

One takes Total.js beyond conventions is the way it boasts functionalities that are quite similar with Node.js framework. Also, its vast collection of libraries in npm make Total.js a framework to rely upon. In addition, there is also an awesome collection of integrated tools and options include that smoothen your journey of creating high-end web applications. You can easily perform functions like file operations, email, and websocket administration. Not only this, you can also take the advantages of custom code to build your own modules. Using Total.js you can easily provide a list of certain modules that help you kick start the process right off the bat.

Understanding About Knockout.js

1. Declarative Bindings

Knockout.js provides an easy way to bind together different UI elements with the data model. When you use JavaScript to manipulate DOM, this might provide you with broken code if you modify the DOM hierarchy or element IDs later. However, using declarative binding even if you change the DOM, that change would not be reflected in the elements. You can bind data to a DOM by adding a data-bind attribute to any DOM element.

2. Flexible Templates

The template building in Knockout.js is quite flexible. Here are few things that you can do with your templates using Knockout.js.

The template binding consists a ‘data’ argument which makes it possible for you to control the context of the binding. It’s an easy solution to define references for nested content. It also includes ‘if’ parameter that allows you handle the output when the value is null.

<div data-bind="template: { name: 'nestedTmpl', 'if': myNestedObject, data: myNestedObject }"></div>

There is also a ‘foreach’ element included in the template binding that allows you add additional elements to your template. For array that is observable and changeable, the knockout automatically adds or removes DOM nodes instead of downloading the entire template.

<ul data-bind="template: { name: 'itemTmpl', foreach: items, templateOptions: { selected: selectedItem } }"></ul>


Just like Total.js, Knockout also has its own set of powerful utilities to help you perform a range of tasks efficiently. You can use them to build your application just by exploring the ko.utls namespace. Some of its popular utilities are: extend and unwrapObservable.

Point To Remember

By default, Total.js minifies HTML/CS,JSS, so it is extremely difficult to debug javascript if a code is written in <script> tags in the HTML. For those who wish to play around knockout.js, it is recommended to keep all the code related to the view model in an individual JavaScript file, and set the js-minify flag in the config-debug file to false.

To Conclude

Knockout.js and Total.js are two leading frameworks that are dictating trends for all the obvious reasons. They continue to gain prominence among so many Javascript frameworks, and provide all the right tools and functions to get the job done. They are great in providing web apps that are scalable and work fantastically across all kinds of devices.

Author Amanda Cline

As an offshore developer by profession, Amanda Cline has already helped several enterprises scale new heights of success with each passing day. She is currently working for Xicom Technologies Ltd, a leading mobile application development company. You can hire her for successful execution of varied web development projects, both simple as well as complex ones. Get in touch with her via @amandacline111 or Facebook.

Tutorial Categories:

One response to “Fabricating Highly Responsive Mobile Apps Using Total.js and Knockout.js”

  1. Saif Ansari says:

    Why you are not trying to change website layout. In other words, i think you should used wordpress with beautiful theme…

Leave a Reply

Your email address will not be published. Required fields are marked *