Backbone/RequireJS and multiple models

Question

I am having trouble wrapping my mind around primarily RequireJS. I see that it is a good/necessary technology, but implementing it, for me, has been a real stretch. I greatly appreciate your help!

I am trying to develop a fairly flexible application with Backbone and RequireJS. The problem is that I am totally used to syntax like new Person() without having to specify dependencies. Is there an efficient way to use RequireJS with quite a number of models? I think my problem is always working with returns. I considered using a factory method to create the model with the require function, but doing so necessitates that the require function is synchronous, which completely defeats the purpose of RequireJS.

It just doesn't seem right to have to require all of my models first and then include those in the instantiation function - or do I?

Do you have any suggestions or tutorials about how to structure and model an application like this?

Thank you for helping me out!

JMax

Answer 1

You can use what I call require js module pattern. If you know a group of classes are often used together you can do something like this.

First you define each class in a separate file and then you define a module to hold them together

Module.js

define([

    './models/FirstModel',
    './models/SecondModel',
    './views/FirstView',
    './views/SecondView',
    'txt!./templates/template.tpl'

], function(FirstModel, SecondModel, FirstView, SecondView, template) {

    return {
        FirstModel: FirstModel,
        SecondModel: SecondModel,
        FirstView: FirstView,
        SecondView: SecondView,
        template: template
    }

});

And then when you want to use class from this module you just do

define(['./Module'], function(Module) {

    var AView = Module.FirstView.extend({

        model: Module.FirstModel,

        render: function() {

            this.html(_.template(Module.template)(this.model.attributes));

            if (something) {

                this.$el.append(new Module.SecondView().render().el);
            }
        }
    })

    return AView;
});

I don't believe using modules defined with requirejs we should return an instance - we should always return a constructor or an object.

You should totally embrace the defining and requiring - with time you'll start to love it - without having to think much about adding/tracking dependencies etc. everywhere by hand or (so 2005!) having most of the stuff in one file :)