Backbone shared collections

Question

I'm starting with Backbone and stumbled upon a question recently. The sample application I'm working on is some kind of playlist. I have a model 'song' and a collection 'Playlist', containing several songs.

The data of the Playlist-collection should be available in multiple views. So my idea is to have global application-variables, and one of these variables could be the Playlist-collection.

This way, I can fetch the songs with the initialization of the app, and access the data in every view of the app.

Below is what I'm doing currently

  define(
        [
            'jQuery',
            'Underscore',
            'Backbone',
            'collections/songlist'
        ],

        function ($, _, Backbone, SonglistCollection)
        {
            var PlaylistView = Backbone.View.extend({

                // properties
                el: '#playlist',
                collection: new SonglistCollection(),

                /**
                 * Initialize
                 */
                initialize: function()
                {
                    // load songs
                    this.collection.on( 'reset' , this.render, this );
                    this.collection.fetch();
                },

                /**
                * Render
                */
                render: function()
                {
                    // loop through the collection and update the view
                },

                ...
            );
        }
);

And this is my collection

define(
    [
        'Underscore',
        'Backbone',
        'models/song'
    ],

    function (_, Backbone, songModel)
    {

        var songList = Backbone.Collection.extend({

            model: songModel,
            url: 'song'
        });

        return songList;
    }
);

As you can see, I have to make a new instance of the collection and re-fetch the data for every view where I want to use the data of the Playlist-collection.

Because I'm using require.js, I'm a bit lost about how to create global variables. The way I like to do it is eg. make MyApp.collections.Playlist, but I have no idea how to realize this with AMD (require.js).

Some resources I've already found, but I'm still lost / confused / ...

• Share resources across different amd modules
• http://www.alexrothenberg.com/2011/02/11/backbone.js-makes-building-javascript-applications-fun.html

Thanks a lot in advance!

Answer 1

If you have a file namespace.js: (in your case myapp.js)

define([
  // Libraries.
  "jquery",
  "lodash",
  "backbone",

  // Plugins.
  "plugins/backbone.layoutmanager"
],

function($, _, Backbone) {

  // Provide a global location to place configuration settings
  var namespace;

  // ...
  return namespace;
});

Then in your modules / Collections, just import that file, the same way that you will do with other library:

define([
  "namespace",

  // Libs
  "backbone"
],

function(namespace, Backbone) {


  // This will fetch the tutorial template and render it.
  var Playlist = namespace.collections.Playlist = Backbone.View.extend({
          //...
  });

  // Required, return the module for AMD compliance
  return Playlist;

});

The same way, you can define a router. And then in a separate main.js file, is where the app is initialized (using require() instead of define() )

Credit: this way of structuring the app I found it in the tbranyen BB boilerplate: https://github.com/tbranyen/backbone-boilerplate/tree/master/app/tree