Basic Backbone View

a Backbone view and model

by Oakley Hall

HTML

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<div id="rootEl"></div>

CSS

#rootEl{
    height:50px;
    width:50px;
    background-color:red;
}

JavaScript

var CoolView = Backbone.View.extend({
    el : $("#rootEl"),
    initialize: function(){
        this.colors = this.model.get('colors');
        console.log('thingy');
    },
    events: {
        'click' : 'clickHandler',
        'touchend' : 'clickHandler'
    },
    clickHandler:function(evt){
        var color = this.getColor();
        $(this.el).css('background-color', color);
        this.render();
        
        console.log('clicked ' + evt.currentTarget.id);        
        console.log('new color ' + color);
    },
    index:0,
    getColor:function(){
        var ret = this.colors[this.index];
        if( this.index < this.colors.length-1 ){
            this.index++;
        }else{
            this.index = 0;
        }
        return ret;
    }
});

var CoolModel = Backbone.Model.extend({
    defaults:{
        colors:['blue','green','yellow','black']
    }
        
});


new CoolView({model:new CoolModel({})});