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.

  • 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.


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

    • 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.

  • Zohar

    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?

    • This is a very good article. The information, the precision of writing is just amazing. I could not have dreamt of a much better article than this. Thank you very much for doing this…

  • 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.

    • The work is absolutely amazing. One of the best work of any articles I’ve ever seen in my entire life. And let me tell you that you are absolutely amazing person and I’d like to get your autograph

  • Pingback: Crafting Native Looking iOS Apps with HTML, Backbone.js, and PhoneGap()

  • You are the Man…

    Keep up the good work

  • Somuraja

    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

    • 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.

      • Thank you for another important article. Where else can you get this information in a comprehensive way of writing…

  • Ken

    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

      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 :-)

      • 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!

        • 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.

    • 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

    • I’ve been interested in this subject for a while and really like that you’ve penciled it out in detail. It couldn’t have come at a better timing..

      • Thanks so much for sharing this awesome info! I am looking forward to see more postsby you!

        • am honored to be reading this article here. This article is something that I have not seen ever in my life and I would like to see more articles like this in the future from your side.

          • something that will help me with my class assignment. It helped me to better understand another aspect of this topic. Thanks.

  • Alfredo Lin

    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!

    • You like this image? Click on the button to share it with others (Facebook, Google, MySpace & more…)

    • Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work.

      • You must have a note pad where you indicate those areas that contact for fix and those that contact for alternative.

    • The driver refused to break his tractor in the district, where police was quoted as saying the driver was gunned down after attempting to flee the area.

  • Harish kumar

    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

      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

        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 ?

      • I like this post.And I guess that they having fun to read this post.they shall take a good site to make a information.thanks for sharing it to me.

        • Thanks on your marvelous posting! I truly enjoyed, reading it, you will be a great author. If u mind, please visit me back

    • i am glad to read the whole content of this blog and am very excited and happy to say that the webmaster has done a very good job here to put all the information content and information at one place

  • Eric Smith

    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.

  • Hi,
    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


  • user1

    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

      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

    • I favor your post. It is good to view you verbalize through the heart along with understanding with this important subject matter could be simply observed…

  • 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.


  • 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.

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

  • Rafał


    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).



  • 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?

  • 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?

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

  • 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!

  • 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.

    • 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

  • Pingback: Mobile Apps Node Js | mbwmobile()

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

  • ali khan

    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

    • Thank you for helping people get the information they need. Great stuff as usual. Keep up the great work!!!


    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

  • ali khan

    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

  • Gail Dedrick


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


  • I keep visiting this blog daily because of the amount of information I get here. Thanks a lot again. I will share this page to others also…

  • kalite,fiyat uygunlugu ve imalattan.profesyonel ekip eşliğinden güvenilir işler yapılmaktadır.http://jonsunsport.com/antrenman-malzemeleri.html

  • I am so excited to see this great post you have done a great post I like it and I share your post with my all friends thanks I am waiting for your next post free forum promotion