Question

uhh it’s hard to come with a right title for this problem excuse me.

In a backbone.js application i am building. Models, Views, Templates are all in separate javascript, html files. I want to export the Models, Views and Templates to the application bootstapper file (app.js) without polluting the global variable i.e doing window.App.Model = myModel; that. By export i mean make the code inside the files available to app.js for initialization and running

1. How do i go about doing this?

2. Are there any patterns that will solve the problem? Could you provide me a example

Description

In cases where models,views and templates are split to many disparate files the application bootstrapper file app.js should have some means to access these M,V,C components. Hence common approach is to do below inside the model.js file

window.App.Model.PersonModel = Backbone.Model.extend({});

App.js

var instance = new window.App.Model.PersonModel();
var personView = new window.App.Views.PersonView({model:instance});

Finally you see that everything derives from the Global object App which i think is not safe, improper and weak way to build application dependencies

Suggestions

Just to the above question, could someone suggest a template loading library(javascript templates regardless of engine used) that can be used to load the templates

Answer 1

Take a look on RequireJS, which support asynchronous module definitions/loading. You would have to rewrite your modules to and app.js to satisfy AMD api, but it would take only few strings of code.