Rendering tabs (jquery ui) with Backbone.js & underscore.js

Question

I'm currently playing with strophe.js, backbone.js & wijmo (UI library based on jquery UI) and working on a chat interface. I have two dialog boxes, one is the contacts list, the other one will be the chat container. Chat will be organized in tabs with the classic jquery UI markup:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Chat 1</a></li>
        <li><a href="#tabs-2">Chat 2</a></li>
        <li><a href="#tabs-3">Chat 3</a></li>
    </ul>
    <div id="tabs-1"><!-- Content chat 1 --></div>
    <div id="tabs-2"><!-- Content chat 2 --></div>
    <div id="tabs-3"><!-- Content chat 3 --></div>
</div>

Each individual chat container will contain a participants list (multi-user chat), the messages and a form.

Being fairly new to Backbone & underscore, I'm wondering what's the best way to handle this. I started with a Chat model, a Chats collection, a chat view and a chat list view but I don't find a proper way to render the tabs and keep it updated.

Any ideas ?

Answer 1

Use a router.

Create a View class for a chat. Each chat will get its own view and its own tabs. On update, the render() function for the view updates the chat, even if it's not visible to the user.

The code I use for managing tabs looks like this:

hide: ->
    if @el.is(":visible") == false
        return null
    $('#' + @id + '-tab').removeClass('activetab').addClass('inactiveTab')
    $.Deferred((dfd) =>
        @el.fadeOut('fast', dfd.resolve)
    ).promise()

show: ->
    if (@el.is(':visible'))
        return
    $('#' + @id + '-tab').removeClass('inactiveTab').addClass('activetab')
    $.Deferred((dfd) =>
        @el.fadeIn('fast', dfd.resolve)
    ).promise()

This is what goes into the view. Each view gets a slugified name. Note the use of "Deferred," the jQuery library. I'll discuss that later.

In your Router, define a route for chats:

    'chat/:chatid': 'switchOrStartChat'

And the methods:

    fadeAllViews: () ->
        _.select(_.map(@views, (v) -> v.hide()), (t) -> t != null)

     switchOrStartChat: (chatid) ->
          chat = @views[chatid] ||= new ChatView({chatid: chatid})
          $.when.apply(null, this.fadeAllViews()).then(() -> view.show())

You can generalize this further, of course, but the idea is that whenever you switch tabs, you just toggle a method to hide everything that's visible, and then (the Deferred makes sure this happens in the right order) show the one thing that's not. The tabs are maintained by each view; you'll have to do a little finagling as they'll probably be outside the actual DIV maintained by the View, but that's pretty simple. You'll have to write a separate template for your tab objects to create tab DOM objects with IDs that contain your chatid slug, but that's easily managable.

I wrote a tutorial on this kind of one-page design: The Backbone Store (link goes to the Javascript version, although I'm a coffeescript partisan these days), where I also discuss using this technique to find and modify slug-based navigation aids such as tabs, breadcrumbs, and the like.