Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Google Sign In with OpenID

New tutorial on integrating Elefant with Backbone.js

edited September 2011 in Documentation

Just finished posting a tutorial on how to connect Backbone.js with Elefant in the back-end:


  • I am trying to make use of this tutorial along with the code example for paging a dataset found at:

    The code example includes the logic for getting the dataset for a page in the handler for the page (apps/myapp/handlers/example.php) while the tutorial has it in a library class (apps/todos/lib/TodoApi.php). The "get_item" function from the latter has no capability of pagination, it either returns a single row or all rows. How can I merge these two examples to use backbone's RESTful capabilities with pagination?

  • I would probably do it with something like the following gist instead of Elefant's simplistic pager handler:

    The Elefant pager is server-side, so it won't easily play nicely with Backbone via REST. But it should be pretty easy to tie together by extending the new PaginatedCollection and PaginatedView instead of the regular Backbone.Collection and Backbone.View on the client side, and modifying the TodoApi::get_item() method to limit results by the page and perPage GET parameters on the server side.

    Translating $_GET['page'] and $_GET['perPage'] into a $limit and $offset, you would just have to change the ->fetch_orig(); call in get_item() to be ->fetch_orig($limit, $offset);

    From the look of it, Backbone should take care of fetching the right items automatically, but you'll still need to tie your own paging links into the view. The pagination.jst file from the gist should help with that.

    Let me know how it goes. I'd love to see what you come up with!

  • In the tutorial it specifies using $page->add_script() as follows:

    $page->add_script ('/apps/todos/js/underscore-1.1.6.js');
    $page->add_script ('/apps/todos/js/backbone-min.js');
    $page->add_script ('/apps/todos/js/todos.js');
    $page->add_script ('/apps/todos/css/todos.css');

    However that gives this result:

    <!DOCTYPE html>
    <title> - Todos
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="/css/text.css" />
    <link rel="stylesheet" type="text/css" href="/css/960.css" />
    <link rel="stylesheet" type="text/css" href="/css/style.css" />
    <script src="/js/jquery-1.6.2.min.js"></script>
    <<script type="text/javascript" src="/apps/admin/js/jquery.jgrowl.min.js"></script>
    <script type="text/javascript" src="/js/jquery.cookie.js"></script>
    <script type="text/javascript" src="/apps/admin/js/top-bar.js"></script>
    <link rel="stylesheet" type="text/css" href="/apps/admin/css/jquery.jgrowl.css"></script>
    <link rel="stylesheet" type="text/css" href="/apps/admin/css/top-bar.css"></script>

    Notice beginning at the third line from the bottom.

    I found I instead had to use:

    $page->add_script ('<script type="text/javascript" src="/apps/todos/js/underscore-1.1.6.js"></script>');
    $page->add_script ('<script type="text/javascript" src="/apps/todos/js/backbone-min.js"></script>');
    $page->add_script ('<script type="text/javascript" src="/apps/todos/js/todos.js"></script>');
    $page->add_script ('<link rel="stylesheet" type="text/css" href="/apps/todos/css/todos.css"></script>');

    to get it to work.

  • Strange, are you using Elefant 1.2 or an earlier version? The early releases used to require the <script> tags, but recent versions should work fine both ways (I double checked with my test copy and both seem to work the same).

  • I am using phpfog and whatever they automatically install.

  • In step 2 of the tutorial, the link to Underscore.js is broken. Perhaps you want to use instead.

  • Fixed the underscore link, thanks for catching that!

    PHPFog may have an older version, I'm going to tweet at them in case they haven't updated it recently. Newer versions of Elefant should report the version number in the footer of the admin pages btw :)

  • Just checked and it looks like they haven't updated Elefant in a while! Letting them know now.

  • There is no version number report on my admin page so you must be correct about that. Is there a simple way to upgrade?

  • Since PHP Fog uses their own git repository for managing sites, adding the main Elefant repository as a remote in your local copy of it might be the easiest way. Something like this:

    # add and track the elefant project
    git remote add --track master elefant git://
    # fetch the latest elefant updates
    git fetch elefant
    # merge them with your site
    git merge elefant/master

    A few things to notes about the above:

    • That may not go 100% smoothly (may require manually merging some changes), but git will at least let you get back to a known state before pushing to the live site.
    • You may not want to track 'master' but rather '1.2' which will stay stable.
    • I haven't actually had a chance to update a PHP Fog-hosted Elefant site myself yet.
Sign In or Register to comment.