Backbone.Marionette Playground

A base template to use for building Backbone and Marionette applications. http://marionettejs.com

by tonicboy

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<script src="http://marionettejs.com/downloads/backbone.marionette.js"></script>
<header>
     <h1>Combine multiple fetch's</h1>

</header>
<article id="main"></article>
<script type="text/html" id="sample-template">
    put some <span> <%= venue.name %> </span> here.
</script>

CSS

#main span {
    background-color:#ffc;
    font-weight: bold;
}

JavaScript

// Define the app and a region to show content
// -------------------------------------------
var App = new Marionette.Application();
App.addRegions({
    "mainRegion": "#main"
});

App.module("SampleModule", function (Mod, App, Backbone, Marionette, $, _) {
    var MainView = Marionette.ItemView.extend({
        template: "#sample-template"
    });
	
    var AllVenues = Backbone.Model.extend({
		progress: 0,
		join: function (model) {
			this.progress++;
			// do some processing of each model
			if (this.progress === this.urls.length) this.finish();
		},
		finish: function() {
			// do something when all models have completed
			this.progress = 0;
			console.log("FINISHED!");
		},
		fetch: function() {
			successCallback = function(model) {
				console.log("Returning from the fetch for a model");
				Mod.controller.model.join(model);
            };
			_.bind(successCallback, this);
            $.each(this.urls, function(key, val) {
				var venue = new Backbone.Model();
				venue.url = val;
				venue.fetch({
					success: successCallback
				});
			});
		}
    });	
	
    var Venue = Backbone.Model.extend({
        toJSON: function () {
            return _.clone(this.attributes.response);
        }
    });
	
    var Controller = Marionette.Controller.extend({
        initialize: function (options) {
            this.region = options.region;
            this.model = options.model;
            this.listenTo(this.model, 'change', this.renderRegion);
        },
        show: function () {
			this.model.fetch();
        },
        renderRegion: function () {
            var view = new MainView({
                model: this.model
            });
            this.region.show(view);
        }
    });
    Mod.addInitializer(function () {
        var allVenues = new AllVenues();
		allVenues.urls =...