I am using the backbone-boilerplate, which you can find here.
I was wondering how to add global functionality, which isn't explicitly tied to any specific collection, model, view, etc. An example would be a 'logout' function, which might look like this:
var logout = function(){
// Clear Favorites
// Handle asynchronous logging (all in-app logs are sent to the server at logout)
// Redirect to the login page
// Do other cleanup
}
Basically, this will handle numerous models/collections, including Favorites, Events, Logs, Users, and the application Router
If you look at the main.js file in the backbone-boilerplate, I have been adding these functions at the top (line 13) like this:
function(namespace, $, Backbone, Example){
// BEGIN MY APP LOGIC
namespace.app.logout = function(){
// Do logout here
};
// END MY APP LOGIC
var Router = Backbone.Router.extend({
This works fine, but the application logic can quickly grow out of control. My question is, what would be a better way to organize this code? If I had a Utils module and loaded that Utils module in, would it make more sense?
Cheers!
TLDR: http://addyosmani.github.com/backbone-fundamentals/ Advanced section.
Make it possible, then make it beautiful, then make it fast.
As you grow your app and make things work (possible), it will become apparent which functions belong together. Separate them into modules accordingly (beautiful).
I use require.js, but not backbone-boilerplate (bb has an AMD branch as well). The way I have organized my app is exactly as you describe, I have a utils module that has general purpose app stuff. I then add Auth, Notification, and Date formatting stuff to the utils module. I then include the utils module wherever I'm lazy and want all my util functions available.
Since they are all just modules/mixins, I can also include the auth/notification/date modules in any single module I need them in.
I've struggled with the same question in my backbone.js application. What I ended up doing was similar to what you suggest, creating a View with specific global functions, (like a Utils module).
If you are looking to keep references to this "Utils" class from being coupled to it, you could bind to the event queue, and process based on messages. For example, for a logout function, you could post a "logout" message to the event queue and bind to it from within the "Utils" view. This way no matter where its called, the message will be passed to the proper function. To call the logout function, you would simply need to post the "logout" message to the event queue.
If your class grows extremely large, this can get confusing, but I would recommend only placing functions that are needed globally.
Update: As a more robust solution, you could build your utility functions directly into backbone itself. The documentation states:
"Because it, (backbone), serves as a foundation for your application, you're meant to extend and enhance it in the ways you see fit — the entire source code is annotated to make this easier for you."
I've found that by adding to the backbone object you can enhance the built in Utility functons, (noConflict and setDomLibrary), to include things such as logout. Just like any Javascript function, you can initialize necessary variables and then call them like
Backbone.logout();
I'd put those into application view. When it grows too large (my personal limit is 600-800 lines), you're usually able to group most of those global methods into few logically reasonable helper modules to keep you application view small enough.