Anagram decetor

by niki4810

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://rawgithub.com/derickbailey/backbone.memento/master/backbone.memento.min.js"></script>
<script src="https://rawgithub.com/derickbailey/backbone.marionette/master/lib/backbone.marionette.js"></script>
<script src="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.js"></script>
<link rel="stylesheet" href="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.css">
<script src="https://rawgithub.com/marionettejs/backbone.wreqr/master/lib/backbone.wreqr.js"></script>
<script id="para-view" type="text/template">
    <p class="para">{{word}}</p>
</script>
<script id="ana-view" type="text/template">
    <p>{{anagram}} : {{count}}</p>
</script>
<script id="container-view" type="text/template">
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
</script>

CSS

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }
.container{
 width : 100%; 
 padding: 10px;   
}
.left,
.right,
.bottom{
    height:200px;
    overflow-y:auto;
    width : 50%;
    border : 1px solid;
    float:left;
    padding : 5px;
}

.bottom{
    width : 100%;
    height : 50px;
}

JavaScript

var MyApp = {};

/*event aggregator*/
var vent = new Backbone.Wreqr.EventAggregator();

/*collections*/
MyApp.ParaCollection = new Backbone.Collection();
MyApp.AnagramCollection = new Backbone.Collection();

/*views*/
MyApp.ParaView = Backbone.Marionette.ItemView.extend({
    template: "#para-view",
    vent : vent
});
MyApp.ParaCollectionView = Backbone.Marionette.CollectionView.extend({
    itemView: MyApp.ParaView,
    vent : vent
});

MyApp.AnagramView = Backbone.Marionette.ItemView.extend({
    template: "#ana-view",
    vent : vent
});
MyApp.AnagramCollectionView = Backbone.Marionette.CollectionView.extend({
    itemView: MyApp.AnagramView,
    vent : vent
});

/*main container*/
MyApp.MainContainerView = Backbone.Marionette.Layout.extend({
    template: "#container-view",
    vent : vent,
    className: "container clearfix",
    regions: {
        paragraphs: ".left",
        anagrams: ".right",
        summary: ".bottom"
    },
    initialize: function(){
        _.bindAll(this);
    },
    onRender: function () {
        this.paragraphs.show(this.constructSubViews(MyApp.ParaCollectionView,MyApp.ParaCollection));
        this.anagrams.show(this.constructSubViews(MyApp.AnagramCollectionView,MyApp.AnagramCollection));
    },
    constructSubViews : function(view,collection){
        var mySubView = new view({
            collection: collection
        });
        return mySubView;
    }
});


MyApp.init = function () {  
    var myContainerView = new MyApp.MainContainerView();
    myContainerView.render();
    $('body').append(myContainerView.$el);
    
    var paras = ["foo","bar","baz","oof","loo","dog","loo","ool"];
    _.each(paras,function(para){
        MyApp.ParaCollection.add({word:para});
    });
};


$(function () {
    _.templateSettings = {
        interpolate: /\{\{(.+?)\}\}/g
    };
    MyApp.init();
});