Dynamically load dependencies in Backbone/RequireJs

Question

I'm using the Backbone/RequireJs javascript stack. What i want to achieve is to dynamically require the Model dependencies for a Backbone.Collection, after that Collection dependency is set.

I want to keep that Collection as much generic as possible and i want to assign different Models and rest urls depending on the main current context. The goal is, well, loading only the needed in a particular context.

window.Collection = Backbone.Collection.extend({

    initialize: function(modelName,apiRoute){

        this.modelName = modelName;
        this.apiRoute = apiRoute;

        if (typeof(window[this.modelName]) === "function") { 
            this.model = window[this.modelName];
            this.url = "./api/" + this.apiRoute;
        }
    }
...

The problem here is that window[this.modelName] dependency in the main context must be loaded before the Collection dependency.

Say the object MainContext needs a Collection:

// MainContext.js    
define([ 
     ...
     "model/Collection"

and inside MainContext i resolve the modelName variable needed for the name value of the required dependency for the Collection (e. 'Toys'). If i require(['model/Toys']) inside MainContext, that dependency file will be loaded too late.

What would be the approach in a case like that? Appreciate.

I don't totally follow what you are trying to do, but you might be doing a premature optimization by trying to dynamically manage your dependencies. If you keep it simple and use a static approach, then the RequireJS Optimizer should be able to take care of it all for you: requirejs.org/docs/optimization.html — Eric Levine
– Eric Levine, Commented Mar 25, 2013 at 17:59

machineghost · Accepted Answer · 2013-03-25 20:16:13Z

2

It sounds like you're describing a standard Require.js circular dependency. In other words, you have a Collection that depends on Toys, but some other module or modules are making that impossible.

The standard solution to this, which you alluded to, is to use the synchronous form of require, ie. require(['model/Toys']). However, it sounds like putting it in MainContext is the wrong way to go, because it hasn't been loaded by the time MainContext loads.

The way around this is to use the synchronous require in the place that doesn't need it at load time, which sounds like your Collection. Your Collection needs the model, but it needs it at run-time (specifically when initialize is run). If you change your code to:

window.Collection = Backbone.Collection.extend({

    initialize: function(modelName,apiRoute){

        this.modelName = modelName;
        this.apiRoute = apiRoute;

        if (typeof(window[this.modelName]) === "function") { 
            this.model = require('model/' + this.modelName);
            this.url = "./api/" + this.apiRoute;
        }
    }
....

the model should already be loaded by the time your initialize runs.

Hope that helps.

answered Mar 25, 2013 at 20:16

machineghost

36k33 gold badges174 silver badges271 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TMichel Over a year ago

sorry for the delayed reply. this pointed me the right way to solve this particular issue plus taught me new term: circular dependency. thanks!

Collectives™ on Stack Overflow

Dynamically load dependencies in Backbone/RequireJs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related