about the author

Name: Ivan Loire

GitHub: iloire

Twitter: ivanloire

Location: Sydney (Australia)

from the author

Node.js example application using express.js and knockout.js (for the LSWC)

by Ivan Loire on Friday, November 11, 2011

I created a simple express.js application for the speech I gave at the Libre Software World Conference conference. I used express.js as web framework and knockout.js for view-model binding. The REST service is using REDIS as database.

26/02/2012 Note: This application has evolved to become directorio.cachirulovalley.com. You can check the project in github.

Steps to develop this simple app:

1. Creating the REST Service

I'm using Journey, a JSON HTTP routing module.

The routes are defined as simple as this:

    //user related
    router.get('/v1/users/bytag').bind(function (req, res) {  service.GetUsersByTag(req,res) });
    router.get('/v1/users/bycat').bind(function (req, res) {  service.GetUsersByCat(req,res) });
    router.get('/v1/user').bind(function (req, res) {  service.GetUser(req,res) });

    //categories and tags
    router.get('/v1/tags').bind(function (req, res) {  service.GetTags(req,res) });
    router.get('/v1/cats').bind(function (req, res) {  service.GetCats(req,res) });

    //search engine
    router.get('/v1/search').bind(function (req, res) {  service.SearchUsers(req,res) });

    //default route
    router.any.bind(function (req, res) { res.send('Hi there!') });

Then you need to implement each service, who will be responsible for accessing the database (REDIS in this case)

Check the source code in GitHub

2. Creating the express app, and adding one http GET handler for the main request

Something like this would work for demo purposes:

    app.get('/', function(req, res){
        var service_url = config.serviceHost  + ':' + config.servicePort
        http_wrapper.Get(service_url + '/v1/cats', req, function (data, status){
            if (!data.error){
                res.render('index', {title: 'Home', categories : data.categories,  service_url: service_url});
            }else{
                res.end('error processing request'); //TODO: err handling
            }
        })
    });

A separate library is being used to wrap http requests and return JSON data from response.

3. Using knockout to bind your UI to a javascript model (view-model binding)

These are the includes needed in the html page:

    
        <%= title %>
        
        
        
        
        
        
    

In the javascript file, we need to create the knockout model-view:

    var viewModel = {
        professionals: ko.observableArray()
    };

Take a look at knockout.js web site for documentation, training and examples

4. Use jQuery to asynchronously update your model (and hence all the UI controls that are binded to it)

Here were are directly calling the REST service, using an Cross Domain JSONP ajax call:

    function LoadProfessionalsByCat(idcat){
        $('ul#professionals').hide();
        $.ajax({ url: server_root + '/v1/users/bycat', data: {id:idcat}, dataType: 'jsonp', success: function (data) {
            $('ul#professionals').fadeIn();
            viewModel.professionals (data.users);
        }
        });
    }

The response (JSON format) is directly passed to the view-model that will render the necessary UI components.

Online demo

Check the online demo here
Check directorio.cachirulovalley.com better.

Source code

You can find the source code in GitHub: