Backbone.js:: Customize Model Methods

Name

by mreis1

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<div id="sidebar"></div>

CSS

#sidebar{
    width:200px;
    height:200px;
}

JavaScript

// customizing a model behaviour by extending it
var Sidebar = Backbone.Model.extend({
    promptColor: function () {
        var cssColor = prompt("Please enter a CSS color:");
        this.set({
            color: cssColor
        });
    },
    
    promptHeight: function(){
        var objHeight = prompt("Please enter a height:");
        this.set({
            height: objHeight
        })
    }
});

// instantiating a new customized model object
window.sidebar = new Sidebar;

// attching events to model changes
sidebar.on('change:color', function (model, color) {
    $('#sidebar').css({
        background: color
    });
});

sidebar.on('change:height', function (model, obj_height) {
    $('#sidebar').css({
        height: obj_height
    });
});

// setting a color on it
sidebar.set({
    color: 'black'
});

//
sidebar.promptColor();
sidebar.promptHeight();