BB.js my very first attempt...fail!

trying out Backbone...

by jancarlo000

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="https://raw.github.com/derickbailey/backbone.modelbinding/master/backbone.modelbinding.min.js"></script>
<script src="https://raw.github.com/derickbailey/backbone.memento/master/backbone.memento.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
<div class='container'>
    <div class='hero-unit'>
        <h1>Backbone.js <small>with Bootstrap</small></h1>
    </div>
    
    Created: <div id='output'></div>
    
    <h1>Separated Views</h1>
    <div id='main-container'>
        <div class='row'>
            <div class='span5' id='view-one'>
                <h2>View #1</h2>
                <p>Hard-coded stuff here...</p>
                <button class='btn default small span5' id='run-code'>run code</button><br/><br/>
                <div id='output' class='alert-message block-message'>
                </div>
            </div>
            <div class='span5' id='view-two'>
                <h2>View #2</h2>
                <p>Using form elements here...</p>
                <button class='btn default small span5' id='run-code'>run code</button><br/><br/>
                <div id='output' class='alert-message block-message'>
                </div>
                <div class='alert-message block-message' id='error-message'></div>
                <form class='form-stacked'>
                    <fieldset>
                        <legend>New Person</legend>
                        <div class='clearfix'>
                            <div class='input'>
                                <label for='FirstName'>First Name:</label>
                                <input type='text' name='FirstName' id='FirstName'/>
                            </div>
         ...

JavaScript

// BACKBONE.JS SKELETON
// note: console will not work; need to show a full window to access console.

var month = new Date().getMonth();

// best practice: simulate private/public and fields/properties
// add through array..
 

/******************************
            MODELS
*******************************/

Person = Backbone.Model.extend({
    
    defaults: {
        'FirstName':'JC',
        'LastName':'unknown',
        'Gender':'M',
        'Age': 0,
        // non-string value
        'Month': month,
        // function: see invocation operator; or else will be string
        'Date': function(){ return new Date().toDateString(); }(),
        'Coordinates':[0,0]
    },
    
    initialize: function(){
        _.bindAll(this, 'changedFirstName', 'handleError');
        console.log('log: NEW MODEL: ' + this.get('FirstName'));
        // remember: 'this' refers to the new *instance, not the class
        // to access attributes, use 'attributes', 'this' by itself also works
        // don't use attributes to set data; use it for cloning, and reading
        // can also use: this.toJSON()
        console.log(this.attributes);
        // model listening...
        // 'this' is important in changedFirstName otherwise it won't work
        this.bind('change:FirstName', this.changedFirstName);
        this.bind('change', function(){ console.log('log: model has changed'); });
        // multiple bindings!!!
        this.bind('error', this.handleError);
    },
    
    // best practice... instead of doing 'set', use setTitle.. to emulate private/public..
    setFirstName: function(str){
        //validation here: is it string? is it empty? is it...
        this.set({'FirstName':str});
    },
    
    setLastName: function(str){
        //validation here: is it string? is it empty? is it...
        this.set({'LastName':str});
    },
    
    // note: it only works on 'set'; doesn't look at 'defaults' value
    validate: function(attr){
        // Age
       ...