Icon WebFont Toolbar Demo

Uses Marionette.js Item view to build a toolbar based on a simple json hash.

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>Icon WebFont Toolbar Demo</h2>
<script id="tool-template" type="text/template">
    <span class='entypo-<%=iconclass%>' > </span>
</script>
<div id="toolbar"></div>
<div id="debugger"></div>

CSS

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

/* entypo */
[class*="entypo-"]:before {
    font-family:'entypo', sans-serif;
    font-size:30px;
    color:#000000;
}
#toolbar ul{list-style:none;}
#toolbar li{float:left;margin:0 5px;}
#toolbar li:hover{color:#333;cursor:pointer;}
#debugger{clear:both;}

JavaScript

var data = [{
    name: 'Search',
    eventToRaise: 'View:Search',
    iconclass: 'search'
}, {
    name: 'Stats',
    eventToRaise: 'View:Stats',
    iconclass: 'chart-bar'
}, {
    name: 'Layer List',
    eventToRaise: 'View:LayerList',
    iconclass: 'map'
}];

//Model
var ToolItemModel = Backbone.Model.extend({});
//Collection
var ToolItemCollection = Backbone.Collection.extend({
    model: ToolItemModel
});

var ToolItemView = Backbone.Marionette.ItemView.extend({
    model: ToolItemModel,
    template: '#tool-template',
    tagName: 'li',
    events: {'click':'itemClick'},
    itemClick: function(){
     $('#debugger').append('Clicked ' + this.model.get('name') + '. Raise the ' + this.model.get('eventToRaise') + 'Event! <br/>');   
    }
});

var ToolsListView = Backbone.Marionette.CollectionView.extend({
    itemView: ToolItemView,
    tagName: 'ul'
});


var region = new Marionette.Region({
    el: "#toolbar"
});
var stuff = new ToolItemCollection(data);
var view = new ToolsListView({
    collection: stuff
});
region.show(view);