A CodePen by magudb. Backbone code

script.js

define(function (require) {
	'use strict';
   
	var Marionette = require('marionette');
	var Backbone = require('backbone');
	var _ = require('underscore');
	var $ = require('jquery');
	require('flex');

	var App = new Marionette.Application();
	App.addRegions({
    	"gallery": "#galleryContainer" ,
    	"mostPopular":"#mostPopularContainer",
    	"flexslider":"#flexslider"
	});
	
	var galleryModel = Backbone.Model.extend({});
	var galleryCollection = Backbone.Collection.extend({
		model: galleryModel,
		comparator: function(item){           
            return item.get('views');
        }
	});
	
 	var galleryItems = new galleryCollection();
	galleryItems.reset(window.galleryJson);       

	var GalleryItemView =  Marionette.ItemView.extend({
        template: "#galleryTemplate",
        onRender: function () {      
      		this.$el = this.$el.children();
      		this.setElement(this.$el);
    	}
    });

	var GalleryView = Marionette.CollectionView.extend({
	  	itemView: GalleryItemView,	  	
	});

	var MostPopularItemView =  Marionette.ItemView.extend({
        template: "#mostPopularTemplate",
        onRender: function () {      
      		this.$el = this.$el.children();
      		this.setElement(this.$el);
    	}
    });

    var MostPopularView = Marionette.CollectionView.extend({
	  	itemView: MostPopularItemView,	  	
	});

	var CarouselItemView =  Marionette.ItemView.extend({
        template: "#carouselTemplate",
        onRender: function () {      
      		this.$el = this.$el.children();
      		this.setElement(this.$el);
    	}
    });

    var CarouselView = Marionette.CollectionView.extend({
	  	itemView: CarouselItemView,
	  	onShow:function(el){	  		
	  		$('.flexslider').flexslider();
	  	}, 	
	  	onRender: function () { 
	  		console.log(this.$el);   
	  		var container = $('<ul class="slides"></ul>')
      		container.append(this.$el.children());
      		this.setElement(container);
    	}
	});



	var galleryModule = App.module('galleryModule', function(){
		var galleryView = new GalleryView({
               		collection: galleryItems,
               	});
        App.gallery.show(galleryView);
	});

	var mostPopularModule = App.module('mostPopularModule', function(){
		 this.addInitializer(function (options) {
            this.controller = new Controller({
                items: options.items,                
                region: App.mostPopular
            });
        });

		 var takeTop5 = function(items){
			var sorted = items.sortBy(function(item){return item.get('views');})
			return sorted.first(5);

		};

		var Controller = Backbone.Marionette.Controller.extend({
            initialize: function (options) {      
                this.region = options.region;
             	var mostPopularView = new MostPopularView({
               		collection:  options.items,
               	});
        		this.region.show(mostPopularView);
        	}
        });	
	});

	var carouselModule = App.module('carouselModule', function(){
		 this.addInitializer(function (options) {		 	
            this.controller = new Controller({
                items: options.items,                
                region: App.flexslider
            });
        });		

		var Controller = Backbone.Marionette.Controller.extend({
            initialize: function (options) {   
                this.region = options.region;
             	var carouselView = new CarouselView({
               		collection:  options.items,
               	});
        		this.region.show(carouselView);
        		
        	}
        });

		
		
	});


	return function(){
			galleryModule.start();	 
			mostPopularModule.start({items:galleryItems.sort()});
			carouselModule.start({items:galleryItems.sort()});      	
           
        };
   

});