Am I structuring my app the right way? - Backbone.js

Question

I am very new to Javascript and backbone.js. Have developed an application in AS3 using RobotLegs and need to port it to Javascipt. For the client side MVC, I started looking at Backbone.js. The concepts seem straightforward but I'm a little unsure about doing things the "right" way. Also have some places I'm stuck...

So basically, I have this web service (non RESTful) that I need to GET a JSON object with the apps config from. Ideally, I think the best way to make this call would be from a Backbone model, but I'm not sure how to override the URL and Parse method to make it work with Non Restful services. So for now I'm making an Ajax call to it from outside of the Model in App.js (code shared below).

Once I get the data from the JSON call, I want to store it in a ConfigModel (SingleTon Model) object that I can query from modules to retrieve value objects that eventually populate some views. I have 2 issues here.

1) I don't know how to implement a Singleton Model using Backbone.js 2) I don't know how I can divide my ConfigModel further into smaller models/collections and if I need to make them Singleton too or just pass them to the View constructors.

I'm using Require.js to define([]) the dependent modules for a particular view/model etc. Now I'm not sure about the scope of the loaded modules. If I need to make them Singleton then I should just load them once somewhere and then inject a dependency into other classes/module objects. How do I carry this out with Backbone.js ???

Lastly, I want to use custom events throughout the framework.. Sort of Framework events that I can dispatch globally and listen to from Models/Views etc...

As you can see, I'm pretty confused regarding scopes/singletons and how all of this fits in with Backbone.js & Require.

Here's how I have my app structured as of now...

1) My index.html file loads up "Main.js" with Require.js

2) In Main.js I load up App.js and call init on it. Init calls a getConfig() function which makes an AJAX call to the web service and gets and parses a JSON text file. This I wanted to store in the singleton ConfigModel. However, I have that commented right now because I started playing around with ways to make the webservice call from with my ConfigModel itself... Which Didn't work.

3) Then I have a router with a default URL map. I initialize the Router after succesfully receiving the JSON from the web service. I'm not sure if this is correct or I should make the Ajax call from the Router?

Here's the code : http://pastebin.com/HHRF88Tq

I know I'm all over the place, but if someone could guide me in the right direction, I'd really appreciate it....

Thanks a bunch.

Sameer

Answer 1

You wanna look at backbone patterns for best practices ( like bootstrapping your models ! )

http://ricostacruz.com/backbone-patterns/

and checkout backbone fundamentals for a a complete overview on backbone architecture ( wip )

http://addyosmani.github.com/backbone-fundamentals/