parentLayout.js

define([
    'marionette',
    'handlebars',
    'modules/accountsData/views/pie',
    'modules/accountsData/views/table',
    'text!modules/accountsData/templates/wrapper.html',
],

function(Marionette, Handlebars, pie, table, tmpl) {

  'use strict';

   var accountsData = Backbone.Marionette.Layout.extend({
      
      template: Handlebars.compile(tmpl),   
      className:'widget-content',
      
      regions: {
	        pie: ".pieChartContainer",
	        table : ".pieChartData"      
      }, 
      widget: {
          pie: null,
          table : null      
      },
     initialize: function(options) {
           this.data = options
     },
     
     onShow: function() { 
          
      this.widget.pie = new pie(this.data);
	    this.listenTo(this.widget.pie, 'pie:change', this.someFunction, this);

      this.widget.table = new table(this.data);
      this.listenTo(this.widget.table, 'table:change', this.someOtherFunction, this);
       
      this.pie.show(this.pie);
      this.table.show(this.table);
 

     },
        
     someFunction: function(options){

     },
     
      
      message: function(msg, state){
          
         this.trigger("show:message", {msg:msg, status:state});
      }
      
   });
   

   return accountsData;

});
   

pie.js

define([
    'marionette',
    'handlebars',
    'text!modules/accountsData/templates/pie.html',
    'flot_pie',
    'i18n!nls/dashboard',
    'culture'
],

function( Marionette, Handlebars, tmpl, PieChart ,locals) {

  'use strict';

  var pieView = Backbone.Marionette.ItemView.extend({

   cssClass: "pieHolder",
   
   initialize: function(options){

      var ViewModel = Backbone.Model.extend({});
          
      this.model = new ViewModel();
      this.model.set(options);
      this.template = Handlebars.compile(tmpl);
   
   },
   
   ui: {
        piecont: ".pieHolder"
   },
   
  onRender: function() {

   var that = this  ;
   require(["domReady!"], function (domReady) {
      
  //   _.defer( function( view ){ view.renderScatterChart();}, this );
  //  },
   
  // renderScatterChart: function(){

  var colorsArr = [
		{"color":"#354E65"},
		{"color":"#5D7184"},
		{"color":"#7B8C9B"},
		{"color":"#93A1AD"},
		{"color":"#A8B2BD"},
		{"color":"#BCC4CC"},		
	];
	
    var pieData = [];
    
     _.each(that.model.toJSON(), function(data,index){
        pieData.push( _.extend(data,colorsArr[index]));
    });
    
	PieChart(that.ui.piecont,pieData,{
            series: {
                pie: {
                    show: true,
                    label: {
                        show: false
                    },
                    radius:1,
                    
                    stroke:{
                        width:0,
                        color:'transparent'
                    }                 
                }
            },          
            legend: {
                show: false
            },
            grid: {
                hoverable: true,
                clickable: true
            }            
        });
     
     that.ui.piecont.bind("plothover", that.pieHover);
     that.ui.piecont.bind("plotclick", that.pieClick);
     
    })
  },
  
  pieHover:function(e){

		//this.trigger('pieHover:change',e.target);
	},
		
 pieClick: function (e){
	
		//this.trigger('pieClick:change',e.target);
	},

  });

  return pieView;

});
  

table.js

define([
    'marionette',
    'handlebars',
     'text!modules/accountsData/templates/table.html',
    'text!modules/accountsData/templates/row.html',
    'i18n!nls/dashboard',
    'culture'
],


function(Marionette, Handlebars, tableTpl, rowTpl, locals) {

  'use strict';

    // A Grid Row
	var RowView = Backbone.Marionette.ItemView.extend({	    
	    tagName: "tr",
	    initialize:function(options){	       
      		this.template = Handlebars.compile(rowTpl, options); 
	    }
	});
	
	// The grid view
	var TableView = Backbone.Marionette.CompositeView.extend({
	    tagName: "table",
	    className:"table table-2col",
	    
	    itemView: RowView,
	    initialize:function(options){
	    	 
	    	this.template =  Handlebars.compile(tableTpl);
	    	var AccountData = Backbone.Model.extend({});
	    	
	    	var AccountDataCollection = Backbone.Collection.extend({
			    model: AccountData
			});
						
			var accountsList = new AccountDataCollection(options);
			this.collection = accountsList;
	    	
	    },
	    appendHtml: function(collectionView, itemView){
	        collectionView.$("tbody").append(itemView.el);
	    },
	    
	});

  return TableView;

});