Question

I’m building small one page application with rails 3.1 mongodb and backbonejs.

I have two resources available through json api. I created two models and collections in backbone which look like this

https://gist.github.com/1522131

also I have two seprate routers

projects router – https://gist.github.com/1522134
notes router – https://gist.github.com/1522137

I generated them with backbonejs-rails gem from github so code inside is just template. I initialize my basic router inside index.haml file

#projects

:javascript
  $(function() {
    window.router = new JsonApi.Routers.ProjectsRouter({projects: #{@projects.to_json.html_safe}});

    new JsonApi.Routers.NotesRouter();

    Backbone.history.start();
  });

I don’t want fetch notes when application is starting, because there is big chance that user will never look inside notes. So there isn’t good reason to fetch it on start. Inside NotesRouter in all action I rely on @notes variable but without .fetch() method this variable is empty. Also I should can reproduce notes view from url like

/1/notes/5

project_id = 1
note_id = 5

What is best practices in backbonejs to solve this kind of problem ?

Answer 1

Why don’t you lazy load the notes when it’s requested? Here’s an example:

var State = Backbone.Model.extend({
    defaults: {
        ready: false,
        error: null
    }
});

var Note = Backbone.Model.extend({
    initialize: function () {
        this.state = new State();
    }
});

var Notes = Backbone.Collection.extend({
    model: Note,

    initialize: function () {
        this.state = new State();
    }
});

var NoteCache = Backbone.Model.extend({

    initialize: function () {
        this._loading = false;
        this._loaded = false;
        this._list = new Notes();
    },

    _createDeferred: function (id) {
        var note = new Note({ id: id });
        this._list.add(note);
        this._load();
        return note;
    },

    getNote: function (id) {
        return this._list.get(id) || this._createDeferred(id);
    },

    getNotes: function () {
        if (!this._loaded)
            this._load();

        return this._list;
    },

    _load: function () {

        var that = this;

        if (!this._loading) {

            this._list.state.set({ ready: false, error: null });

            this._loading = true;

            $.ajax({
                url: '/api/notes',
                dataType: 'json',
                cache: false,
                type: 'GET',
                success: function (response, textStatus, jqXHR) {

                    _.each(response.notes, function (note) {

                        var n = that._list.get(note.id);
                        if (n) {
                            n.set(note);
                        } else {
                            that._list.add(note, { silent: true });
                            n = that._list.get(note.id);
                        }
                        n.state.set({ ready: true, error: null });
                    });

                    that._list.state.set({ ready: true, error: null });
                    that._list.trigger('reset', that._list);
                    that._loaded = true;
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    that._list.state.set({ error: 'Error retrieving notes.' });
                    that._list.each(function (note) {
                        note.state.set({ error: 'Error retrieving note.' });
                    });
                },
                complete: function (jqXHR, textStatus) {
                    that._loading = false;
                }
            });
        }
    }
});

In this example, I’m defining a NoteCache object that manages the lazy loading. I also add a “state” property to the Note model and Notes collection.

You’ll probably want to initialize NoteCache somewhere (probably inside your route) and whenever you want a note or notes, just do this:

var note = noteCache.getNote(5);
var notes = noteCache.getNotes();

Now inside your view, you’ll want to listen for state changes in case the note/notes is not loaded yet:

var NoteView = Backbone.View.extend({
  initialize: function(){
    this.note.state.bind('change', this.render, this);
  },
  render: function(){
     if (this.note.state.get('error') {
       // todo: show error message
       return this;
     }

     if (!this.note.state.get('ready') {
       // todo: show loader animation
       return this;
     }

     // todo: render view
     return this;
  }
});

I haven’t tested this, so there may be some bugs, but I hope you get the idea.