Employee Directory Sample App with Backbone.js and jQuery Mobile

Here is a mobile version of my Backbone.js Employee Directory application using jQuery Mobile as the UI toolkit.

As described in my previous post, jQuery Mobile was (at least initially) intended as a full-stack framework as opposed to a pure UI toolkit like Twitter Bootstrap. As such, it overlaps with the Backbone.js infrastructure in some areas. In particular, the URL routing feature provided by both frameworks may clash. The approach used here is to disable the routing and navigation capabilities of jQuery Mobile, and essentially use it as a pure UI framework on top of Backbone.js. This approach and its caveats are described in my previous post.

Click here to run the application.

A Backbone.js + Twitter Bootstrap version of this application is available here.

Source Code

I updated the backbone-directory GitHub repository to include this version: It is available in the jquerymobile directory while the Twitter Bootstrap version is available in the web directory.

38 Responses to Employee Directory Sample App with Backbone.js and jQuery Mobile

  1. Mark Barton March 8, 2012 at 4:29 pm #

    Hi Chrisophe

    Thanks for the great articles.

    I wondered if you had a chance to look at knockout.js and how it compares to backbone? I would be very interested in seeing how you feel it compares.


  2. grigio March 10, 2012 at 10:53 am #

    I’ve a similar question, how does Backbone compare to Spine.js ?

    • loafers June 11, 2015 at 4:08 am #

      There is problem for running the application after done all the connection, and while running the application it looks only in heading tag as Welcome to Backbone Wine Cellar.. This is confusing me, Java tech not my style.. Thanks for support please.

  3. Zohar March 23, 2012 at 7:14 am #

    Hi Christophe
    Great article, and blog, alas…
    I have just cloned the git repo, and tried using it, it returns blank page and FF fire bug reports exception ‘a.replace is not a function’. can you help?

  4. fashion photography naples March 26, 2012 at 12:49 am #

    Great post, I have been talking with my friend about, .I would come back to you. Thanks for sharing. Thank you for your blog, very interesting, it’s very informative and useful article. And I guess that they having fun to read this post.

  5. @mainakibui March 29, 2012 at 9:08 am #

    You are the Man…

    Keep up the good work

  6. Somuraja April 5, 2012 at 1:26 pm #

    I created the mobile site using EmployeeDirectoryJQM. Using this i can call the external html file, but now i cant call the page internally using this concept. Is this possible to call the page internally? If it is then give me one sample.

    Thanks in advance

    • Gabrielle Taylor May 11, 2015 at 3:51 am #

      Great post, I have been talking with my friend about, .I would come back to you. Thanks for sharing. Thank you for your blog, very interesting, it’s very informative and useful article.

  7. Ken April 18, 2012 at 10:40 pm #

    I tried this app from the jquerymobile directory modifying the PHP to get the data from Oracle XE 11g and modifying the templates to change the attributes in to upper case as that is how it gets returned from Oracle. This worked out well for the employee list but, when I click on an employee in the list, it seems like the model created for the employee selected does not get populated. Using Moz FireFox, in the console I can see the GET and look at the JSON response and I can see the data from the employee that I selected from the list. So I’m not sure why the model for the selected employee is not getting populated. I also put in default values for the Employee model just to make sure that something would render for the employee details and yes, the default values show up in the employee details. I am at a loss, can someone help?

    • Ken April 25, 2012 at 9:16 pm #

      OK…finally figured it out. For anyone that is using Oracle as the database backend, here’s what I found. (1) attribute names returned by a Oracle query are in uppercase so any reference to data attributes in a backbone.js model also need to be in uppercase. Also backbone defaults the idAttribute to “id” and in the Employee Directory example you need to set that property to “ID”. (2) in the .html templates, you need to change the data attribute references to uppercase so they match the output from the Oracle query that gets memorialized in the JSON encoded string that is returned by the PHP code. (3) in the PHP, change it from using PDO to OCI as PDO for Oracle is still experimental per the PHP documentation and I found it does not work as expeced and OCI works. (4) in main.js there is a call to employee.fetch which in turn calls the PHP function getEmployee. I initially used oci_fetch_all and what happens is the single row of data gets return in a 2 dimension array and as such the json_encode function will encode a JSON string surrounded by square brackets. This does not store into the employee model properly. What I did was use oci_fetch_array($stmt, OCI_ASSOC); and that encoded to a JSON string without the square brackets and the results are then stored in the employee model properly.

      Thanks Christophe for a great BLOG! You’re the greatest :-)

      • Hussain August 27, 2014 at 2:51 pm #

        Hey buddy. You mentioned the solution to get this working with ORACLE as the backend. I couldn’t fully understand what you said and I keep getting SLIM errors. I just got OCI to work but I don’t know exactly how to change it from PDO to OCI. I just kept getting errors on the functions in the php code. Any help on this is greatly appreciated!

        Thanks Ken for the amazing post and thanks Christophe for the amazing blog and for this amazing resource!

        • Hair loss protocol review September 8, 2015 at 3:27 am #

          Thanks for sharing this. There are many events which are celebrated all over the world. we have a website about mothers day event so have a look at it.

    • flat icons October 1, 2015 at 7:17 am #

      simple integration that games can invoke lua scripts. All cocos2d graphic classes are exported, and all touch events are pass to lua loft conversions costs

  8. Alfredo Lin April 24, 2012 at 11:26 am #

    Great article on how to utilize both backbone.js and jquery mobile. Is there a way to keep a jquery mobile render NavBar persistent fixed on top while the content within switch/slide? Thanks!

  9. Harish kumar May 15, 2012 at 12:34 pm #

    I used your iphone application and when i hosted it on my server to run it from my iphone mobile ,
    when i open the 1st search page and search for “K” it shows me 2 records when i delete the “K” from search box then it shows me more then 10 on my phone but after that to see the last record the Page scroll is not working ,
    Is this any kind of bug in your application? because i am not able to scroll down to see the last record.

    • Harish kumar May 15, 2012 at 12:52 pm #

      Sorry For my last post,
      I am using the Android phone’s inbuild browser ,
      In my iphone the “APPLICATION IS WORKING FINE” :) , but in my android the page scrolling is not working , May you tell me the problem , why your iphone app is not working properly on android device.

      • user1 July 25, 2012 at 8:45 pm #

        Hi Christophe,

        Thanks for the article.

        I have a requirement to set up Employee directory application using xcode. would you please provide me useful links which I can go through ?

  10. Eric Smith June 1, 2012 at 10:30 pm #

    Thanks for building this and explaining everything so well. The routing system you’ve put together is top-notch and is helping me very much with a project.

    I had a question regarding the backbone/jquery mobile version. When the back button is clicked, the slide transition slides in the same direction as other transitions. Is it possible to make the back button trigger a reverse transition using this method, so it slides in the opposite direction? As it is not using jquery-mobile routing, adding data-transition=”reverse” to the back button appears to have no effect.

  11. Christophe June 16, 2012 at 7:19 pm #

    thanks for this very interesting article.
    I have tried to developp my own mobile site using your sample, based on the same principle, and it works fine. The only problem I have is when i try to refresh a page, i loose the style and content of the page, and the loading never ends.
    My mobile site is at http://m.webresa.fr
    Can you help me and tell me what is wrong ?

    I thank you in advance


  12. user1 July 25, 2012 at 8:46 pm #

    Hi Christophe,

    Thanks for the article.

    I have a requirement to set up Employee directory application using xcode. would you please provide me useful links which I can go through ?

    • ali khan April 6, 2015 at 11:39 am #

      Person, what is the first effect, how would you independently experience this personal or company opportunity to existing this particular service, and just how effectively justifications have you applied your research. affair dating sites

  13. Slider September 5, 2012 at 4:12 am #

    Hey, this article and code really helped me getting started, thanks!

    I have a question. In the “render” method of the”window.EmployeeListView” view, why do we have to call:
    instead of

    I thought they were supposed to be the same.


  14. click this February 6, 2013 at 3:11 pm #

    I’ve learn several excellent stuff here. Certainly price bookmarking for revisiting. I surprise how much effort you set to make this kind of fantastic informative website.

  15. Valerie February 10, 2013 at 10:48 pm #

    You need to take part in a contest for one of the highest quality sites online.
    I will highly recommend this web site!

  16. Rafał June 14, 2013 at 2:20 am #


    I am using your cool code as a base for my web app and have stubmled upon the following case:

    when using jQuery 10.1, the following code:

    $(‘div[data-role=”page”]’).live(‘pagehide’, function(event, ui) {

    triggers the following error message: (On Firefox, Safari, NOT mobile!)

    TypeError: $(…).live is not a function

    It seems that the div with the data-role does not actually (yet exist) at that point. Do you think it can affect the flow as far as mobile development is concerned?

    After I commented this code, everything seems to work fine (so far).



  17. page April 9, 2014 at 12:09 am #

    Do you have to rely on your country to give you something all the time, think out of the box and
    improvise on how you would earn more than what employment can
    offer, CNBC investing may help. Supported hardware devices:
    UNIX supports less hardware devices than Windows. According to the officials of the association, some tips to
    be followed by SMBs to prevent the attacks are:

    I’m really loving the theme/design of your
    blog. Do you ever run into any internet browser compatibility issues?
    A number of my blog readers have complained about my blog not working correctly in Explorer
    but looks great in Safari. Do you have any suggestions
    to help fix this problem?

  18. Lost April 23, 2014 at 10:29 pm #

    how do you get the application to load the contents of the data store upon first opening the application? or on initialization of the list view?

  19. clash of clans hack no survey May 22, 2014 at 2:26 am #

    Incredible points. Solid arguments. Keep up the
    great spirit.

  20. the simpsons tapped out cheats 2014 June 5, 2014 at 7:52 am #

    Very good blog! Do you have any recommendations for aspiring writers?
    I’m planning to start my own blog soon but I’m a little lost on everything.
    Would you propose starting with a free platform like WordPress or go for a paid option? There
    are so many choices out there that I’m totally confused ..

    Any recommendations? Cheers!

  21. castle clash hacks that work June 19, 2014 at 12:37 am #

    It’s remarkable to pay a visit this web site and reading the
    views of all colleagues concerning this piece of writing, while
    I am also eager of getting know-how.

    • downeastcoconut September 21, 2015 at 2:37 am #

      The best of Mercy Animal Hospital in Edmonton that offer spay and neuter to your animals especially dog, cat and so on. This is the fist hospital with modern facilities and also offer products and services

  22. konveksi baju February 12, 2015 at 12:12 pm #

    very nice share article.
    i will work with js and jquery mobile

  23. ali khan April 6, 2015 at 5:19 am #

    Links that are not appropriate to your web page are punished when you have a large number of them, and you will discover your web page reduced than it was before in the SERPS. property valuations sydney

  24. FGJD FDJH April 14, 2015 at 6:44 am #

    I had a LG G3 that was stolen a couple of weeks ago, it shows me the date of registration but I cant do anything because the phone cannot be located. castelvetranoselinunte.it

  25. ali khan April 21, 2015 at 9:10 am #

    Everyone should take SEO organizations as it’s as part of your reach to understand, but not anyone can use wise way to create SEO execute.This is why SEO business owners are necessary to obtain the very challenging, but now you ask. m88

  26. Gail Dedrick April 21, 2015 at 6:23 pm #


    Is the application you link to supposed to bring back fake results? I can’t get anything to come up.



  1. Crafting Native Looking iOS Apps with HTML, Backbone.js, and PhoneGap - March 28, 2012

    […] Bootstrap can help (read here). But what about Mobile apps? I explored Backbone.js + jQuery Mobile here. Depending on what you are looking for, it may or may not not be the right solution: jQM provides […]

  2. Mobile Apps Node Js | mbwmobile - October 24, 2014

    […] Employee Directory Sample App with Backbone.js and jQuery … – Here is a mobile version of my Backbone.js Employee Directory application using jQuery Mobile as the UI toolkit. As described in my previous post, jQuery Mobile …… […]

Leave a Reply