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.

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

    Mark

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

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

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

  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 #

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

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

  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 #

    Hi,
    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.
      Thanks

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

    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

    Christophe

  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 ?

  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:
    “$(‘#myList’).listview(‘refresh’);”
    instead of
    “$(this.el).listview(‘refresh’);”.

    I thought they were supposed to be the same.

    Thanks.

  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 #

    Hi,

    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) {
    $(event.currentTarget).remove();
    });

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

    Regards,

    Rafał

  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.

Trackbacks/Pingbacks

  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 [...]

Leave a Reply

css.php