tehasdf/gist:4707345

## gistfile1.js
<!doctype html>


<html>
  <head>
    <title>asd</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="underscore.js"></script>
    <script src="backbone.js"></script>
    <script>
      (function(Backbone){
        var Collection = Backbone.Collection;
        Backbone.Collection = Collection.extend({
          fetchOptions:{},
          fetch:function(options){
            if(this.xhr&&this.xhr.state()=='pending'){
              this.xhr.abort();
            }
            this.fetchOptions=options||{};
            return this.xhr = Collection.prototype.fetch.apply(this,arguments)
          },
          refetch:function(options){
            var options = _.extend({},options);
            options.data = _.extend({},this.fetchOptions.data,options.data);
            return this.fetch(options);
          }
        });
      }(Backbone));
    </script>
    <script src="https://raw.github.com/marionettejs/backbone.wreqr/master/lib/backbone.wreqr.js"></script>
    <script src="https://raw.github.com/marionettejs/backbone.babysitter/master/lib/backbone.babysitter.js"></script>
    <script src="https://raw.github.com/marionettejs/backbone.marionette/master/lib/backbone.marionette.js"></script>
    <script src="https://raw.github.com/g00fy-/backbone.marionette/compositeLayout/src/marionette.layout.js"></script>
    <script src="https://raw.github.com/g00fy-/marionette.generic/master/src/views.js"></script>
    <script src="https://raw.github.com/g00fy-/marionette.generic/master/src/mixins.js"></script>

    <style>
      td {
        border: 1px solid black;
      }

      #loading {
        display: hidden;
      }

      #tweets, aside {
        float: left;
      }
    </style>

    <script type="text/html" id="question-list-template">
      <input type="text" value="" data-action="search" data-on="keyup">
      <button data-action=nextPage>Next page</button>
      Page: <span id=currentPage>1</span>
      <span id="loading"></span>
      <table>

        <thead>
          <tr>
            <th>Nick</th>
            <th>Tweet</th>
          </tr>
        </thead>

        <tbody></tbody>
      </table>
    </script>

    <script type="text/html" id="question-template">
      <td><%= owner.display_name %></td>
      <td><%= title %></td>
    </script>

    <script type="text/html" id="tweets-page">
      <main data-region=main></main>
      <aside data-region=aside></aside>
    </script>

  </head>

  <body>

    <div id="tweets"></div>

    <script>

      var Question = Backbone.Model.extend();

      var Questions = Backbone.Collection.extend({
          fetchOptions:{data: {}},
          model: Question,
          url: 'http://api.stackexchange.com/2.1/questions?site=stackoverflow&callback=?',
          parse: function (response) {
              this.meta = response;
              return response.items;
          }
      });

      var UserDetailView = Marionette.ItemView.extend({
        template: _.template("chuj")
      },{
        mixin: function(){
          return _.reduceRight(arguments, function(current, mixin){
            return mixin.contribute(current);
          }, this);
        }
      }).mixin(

      );

      ListWidget = Generic.ListWidget.extend({
        template:"#widget-service-list",
        itemViewContainer:'ol.widget-list',
        initialize:function(){
          if(!this.collection && this.type){
            this.collection = new this.type();
          }
          this.collection.fetch();
          if(this.options.vent){
            this.on('change',function(value){
              this.options.vent.triggerMethod(this.name,value,this);
            }.bind(this))
          }
        }
      });

      var QuestionsWidget = Generic.ListWidget.extend({
        type: Questions,
        template: "#question-list-template",
        itemViewContainer: "tbody",
        itemView: Generic.ListWidget.prototype.itemView.extend({
          template: "#question-template",
          el: "tr"
        }),
        initialize: function(){
          this.collection = new this.type();
          this.collection.fetch();
        }
      });

      var TweetsLayout = Marionette.Layout.extend({
          asideView:Generic.AsideView.extend({
            widgets:[
              QuestionsWidget.extend({name:"questions"})
            ]
          }),
          el: "#tweets",
          mainView: UserDetailView,

          template: "#tweets-page",

          regions: {
              main: "[data-region='main']",
              aside: "[data-region='aside']"
          },

          initialize: function(){
            this.options.vent = this;
          },

          render: function(){
            console.log("pageview render", this.cid);
            return Marionette.Layout.prototype.render.apply(this, arguments)
          },

          onRender: function(){
            if(this.mainView){
                this.main.show(new this.mainView(this.options));
            }
            if(this.asideView){
                this.aside.show(new this.asideView(this.options));
            }
          },
          onTweets: function(x){
            console.log(x);
          }
      });

      new TweetsLayout().render();

    </script>
  </body>

</html>
	<!doctype html>


	<html>
	<head>
	<title>asd</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
	<script src="underscore.js"></script>
	<script src="backbone.js"></script>
	<script>
	(function(Backbone){
	var Collection = Backbone.Collection;
	Backbone.Collection = Collection.extend({
	fetchOptions:{},
	fetch:function(options){
	if(this.xhr&&this.xhr.state()=='pending'){
	this.xhr.abort();
	}
	this.fetchOptions=options\|\|{};
	return this.xhr = Collection.prototype.fetch.apply(this,arguments)
	},
	refetch:function(options){
	var options = _.extend({},options);
	options.data = _.extend({},this.fetchOptions.data,options.data);
	return this.fetch(options);
	}
	});
	}(Backbone));
	</script>
	<script src="https://raw.github.com/marionettejs/backbone.wreqr/master/lib/backbone.wreqr.js"></script>
	<script src="https://raw.github.com/marionettejs/backbone.babysitter/master/lib/backbone.babysitter.js"></script>
	<script src="https://raw.github.com/marionettejs/backbone.marionette/master/lib/backbone.marionette.js"></script>
	<script src="https://raw.github.com/g00fy-/backbone.marionette/compositeLayout/src/marionette.layout.js"></script>
	<script src="https://raw.github.com/g00fy-/marionette.generic/master/src/views.js"></script>
	<script src="https://raw.github.com/g00fy-/marionette.generic/master/src/mixins.js"></script>

	<style>
	td {
	border: 1px solid black;
	}

	#loading {
	display: hidden;
	}

	#tweets, aside {
	float: left;
	}
	</style>

	<script type="text/html" id="question-list-template">
	<input type="text" value="" data-action="search" data-on="keyup">
	<button data-action=nextPage>Next page</button>
	Page: <span id=currentPage>1</span>
	<span id="loading"></span>
	<table>

	<thead>
	<tr>
	<th>Nick</th>
	<th>Tweet</th>
	</tr>
	</thead>

	<tbody></tbody>
	</table>
	</script>

	<script type="text/html" id="question-template">
	<td><%= owner.display_name %></td>
	<td><%= title %></td>
	</script>

	<script type="text/html" id="tweets-page">
	<main data-region=main></main>
	<aside data-region=aside></aside>
	</script>

	</head>

	<body>

	<div id="tweets"></div>

	<script>

	var Question = Backbone.Model.extend();

	var Questions = Backbone.Collection.extend({
	fetchOptions:{data: {}},
	model: Question,
	url: 'http://api.stackexchange.com/2.1/questions?site=stackoverflow&callback=?',
	parse: function (response) {
	this.meta = response;
	return response.items;
	}
	});

	var UserDetailView = Marionette.ItemView.extend({
	template: _.template("chuj")
	},{
	mixin: function(){
	return _.reduceRight(arguments, function(current, mixin){
	return mixin.contribute(current);
	}, this);
	}
	}).mixin(

	);

	ListWidget = Generic.ListWidget.extend({
	template:"#widget-service-list",
	itemViewContainer:'ol.widget-list',
	initialize:function(){
	if(!this.collection && this.type){
	this.collection = new this.type();
	}
	this.collection.fetch();
	if(this.options.vent){
	this.on('change',function(value){
	this.options.vent.triggerMethod(this.name,value,this);
	}.bind(this))
	}
	}
	});

	var QuestionsWidget = Generic.ListWidget.extend({
	type: Questions,
	template: "#question-list-template",
	itemViewContainer: "tbody",
	itemView: Generic.ListWidget.prototype.itemView.extend({
	template: "#question-template",
	el: "tr"
	}),
	initialize: function(){
	this.collection = new this.type();
	this.collection.fetch();
	}
	});

	var TweetsLayout = Marionette.Layout.extend({
	asideView:Generic.AsideView.extend({
	widgets:[
	QuestionsWidget.extend({name:"questions"})
	]
	}),
	el: "#tweets",
	mainView: UserDetailView,

	template: "#tweets-page",

	regions: {
	main: "[data-region='main']",
	aside: "[data-region='aside']"
	},

	initialize: function(){
	this.options.vent = this;
	},

	render: function(){
	console.log("pageview render", this.cid);
	return Marionette.Layout.prototype.render.apply(this, arguments)
	},

	onRender: function(){
	if(this.mainView){
	this.main.show(new this.mainView(this.options));
	}
	if(this.asideView){
	this.aside.show(new this.asideView(this.options));
	}
	},
	onTweets: function(x){
	console.log(x);
	}
	});

	new TweetsLayout().render();

	</script>
	</body>

	</html>