BackboneBoilerplate

This is a fiddle your are asked to fork to build up you Backbone examples. Here you have: - jQuery - Underscore - Backbone - TwitterBootstrap (CSS) Read more on: http://movableapp.com/2012/06/backbone-boilerplate-jsfiddle/

by Jon Beebe

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<script src="https://raw.github.com/marionettejs/backbone.marionette/bb099/lib/backbone.marionette.js"></script>
<!--
TwitterBootstrap Skeleton
-->
<div class="container">
    
    <header class="page-header">
        <h2>My BackboneApp - <small>Start from here and buil whatever you need!</small></h2>
    </header>
    
    <section id="app"></section>
    
    <section style="margin-top:20px;padding-top:20px;border-top:1px solid #aaa">
        <h3>jsFiddle on MovableAPP.com</h3>
        <p>
            <a href="http://goo.gl/ZEAmL">Here I wrote a tutorial to explain how to use this fiddle.</a>
        </p>
        
        <h3>Follow Me!</h3>
        <p>
            Don't forget to <b>follow me on Twitter</b>: <a href="https://twitter.com/movableapp" target="_blank">@MovableAPP</a>
        </p>
        <p>
<a href="https://twitter.com/movableapp" class="twitter-follow-button" data-show-count="false">Follow @movableapp</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>                
        </p>
    </section>
    
</div>

JavaScript

/**
 * So you have $,_,Backbone ready to be used!
 * credits: MPeg
 * http://movableapp.com/2012/06/backbone-boilerplate-jsfiddle/
 */


// Simple Backbone View rapresenting a TwitterBootstrap's span cell.
var SpanView = Backbone.View.extend({
    
    tagName: 'div',
    $parent: false,
    
    defaults: {
        size: 12,
        style:''        
    },
    
    initialize: function() {
        
        this.options = _.defaults( this.options, this.defaults );
        
        this.setSize( this.options.size );
        this.setStyle( this.options.style );
    },
    
    setSize: function( size ) {
        this.options.size = size;
        this.className = 'span' + this.options.size;
        this.$el.attr('class',this.className);
    },
    
    setStyle: function( style ) {
        this.options.style = style;
        this.$el.attr('style',this.options.style);        
    },
    
    getParent: function() { return this.$parent; },
    
    render: function() {
        this.$el.html( this.options.text );
        return this;
    },

    renderTo: function( t ) {
        this.$parent = $(t);
        this.$parent.append(this.$el);
        return this.render();
    }    
    
});


// Just a simple jQuery instruction
$('#app').append('<div class="row">');


// Just creating two Backbone Widgets based on above SpanView declaration
var Cell = new SpanView({
    size: '6',
    text: 'Just a simple TwitterBootstrap cell!'
}).renderTo('#app .row:first');

var Cell1 = new SpanView({
    size: '6',
    text: 'Another TwitterBootstrap cell!'
}).renderTo('#app .row:first');

var Cell2 = new SpanView({
    text: 'Remember to visit: <a href="http://movableapp.com" target="_blank">movableapp.com</a>',
    style: 'line-height:4em'
}).renderTo( Cell.getParent() );



/**
 * BackboneBoilerplate jsFiddle - please don't remove this comment!
 * http://movableapp.com/2012/06/backbone-boilerplate-jsfiddle/
 */