Question

I’m working on an app that uses Backbone and RequireJS (using the Backbone boilerplate).

What I’d like to do is detect if the user is on a mobile device (currently using Modernizr to check for touch), and if so then load jQuery Mobile’s css and js, and have it applied to all modules and their templates.

I’m not sure of the best way to do this with RequireJS.

Cheers

Answer 1

Edit: After re-reading your question, I’m not sure this is what you’re asking for. Sorry for the noise.

I’m currently in a similar situation. You can set properties on Backbone’s View/Router/Model/Etc prototypes and they’ll filter down the chain. So, for example:

//Assuming we're in 'mobile' mode, you'd do this in whatever code gets loaded.
Backbone.View.prototype.useMobileView = true;

Then you can do whatever is necessary if this.useMobileView == true. For example:

ResponsiveView = Backbone.View.extend({

getTemplate: function () {
    if(this.useMobileView) {
        return this.mobileTemplate;
    } else {
        return this.template;
    }
}

});

SomeView = ResponsiveView.extend({

    render: function () {
        var template = this.getTemplate();
        //do stuff
    }

});