Layout Hacking

Uses Marionette.js Layout

by Nikki Rabbitt

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<script src="https://raw.github.com/marionettejs/backbone.wreqr/master/lib/backbone.wreqr.js"></script>
<script src="https://raw.github.com/marionettejs/backbone.eventbinder/master/lib/backbone.eventbinder.js"></script>
<script src="https://raw.github.com/marionettejs/backbone.marionette/master/lib/backbone.marionette.js"></script>
<h2>Marionette Layout Hacking</h2>

<div id="layer-list-container" class="view"></div>

<br />
<p>Create an App, add a region for a layer list. Create a Layout to fill the region and define two child regions. Stuff the basemap and operational layers into those regions via typicaly</p>
<br />
<script type="text/template" id="layer-list-template">
    <div class="header">
        <h3>Layer List</h3>
        <span class="entypo-cancel-circled"></span>
    </div>
    <div class="clear"></div>
    <div id="layer-list-region" class="list"></div>
    <div id="basemap-list-region" class="list"></div>
</script>    
<script type="text/template" id="layer-item-template">        
  <input type="checkbox"  <% if(visible) { %> checked <% } %> /> <%= name %>
</script>
<script type="text/template" id="basemap-item-template">            
  <input type="radio" name="basemaps" <% if(visible) { %> checked <% } %> /> 
        <span> <%= name %></span>
</script> 

<div id="debugger"></div>

CSS

@import url(http://weloveiconfonts.com/api/?family=entypo);

/* entypo */
[class*="entypo-"]:before {
    font-family:'entypo', sans-serif;
    font-size:1em;
    color:#000000;
}
.list {width:150px;float:left;}
.view{background-color:#CCC;
    padding:5px;
    
    border:1px solid #000;
    float:right;}
.header span {float:right;}
.header h3 {float:left;}
.clear {clear:both;}
#debugger{clear:both;}

JavaScript

var basemaps = [
    {name: 'National Geo',visible:false},
    {name: 'Street Map',visible:true},
    {name: 'Topo Map',visible:false}
    ];

var layers = [
    {name: 'Fire Danger',visible:false},
    {name: 'Red Flag',visible:true},
    {name: 'Drought',visible:false}
];

//Model
var LayerModel = Backbone.Model.extend({});
//Collection
var LayerCollection = Backbone.Collection.extend({
    model: LayerModel
});

//Setup and application
myApp = new Backbone.Marionette.Application();
myApp.addRegions({
    layerListRegion: '#layer-list-container'
});    

//create the Layout
var LayerListLayoutView = Backbone.Marionette.Layout.extend({
  template: "#layer-list-template",
  regions: {
    layerListRegion: "#layer-list-region",
    basemapRegion: "#basemap-list-region"
  }
});

//the views
var BasemapItemView = Backbone.Marionette.ItemView.extend({
    model: LayerModel,
    template: '#basemap-item-template',
    tagName: 'li', 
    events: {'click': 'itemClicked'},
    itemClicked: function(){
        $('#debugger').append('BaseMapItemClicked: '+ this.model.get('name') + '<br/>');
    }      
});
var BasemapListView = Backbone.Marionette.CollectionView.extend({
    itemView: BasemapItemView,
    tagName: 'ul'
});

var LayerItemView = Backbone.Marionette.ItemView.extend({
    model: LayerModel,
    template: '#layer-item-template',
    tagName: 'li', 
    events: {'click': 'itemClicked'},
    itemClicked: function(){
         $('#debugger').append('LayerItemClicked: '+ this.model.get('name') + '<br/>'); 
    }      
});
var LayerListView = Backbone.Marionette.CollectionView.extend({
    itemView: LayerItemView,
    tagName: 'ul'
});


console.log('setup done.. starting actions');

//create collections
var basemapCol = new LayerCollection(basemaps);
var layerCol = new LayerCollection(layers);

//create the child views
var llview = new LayerListView({collection: layerCol});
var bmview = new BasemapListView({collection: basemapCol});

//create the parent view
var...