BB 101: Beginning

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.2/backbone-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
<h2>Models</h2>
<!-- What is a SPA -->
<!-- Benefits of BB -->
<p>With Backbone, you represent your data as Models, which can be created, validated, destroyed, and saved to the server. Whenever a UI action causes an attribute of a model to change, the model triggers a "change" event; all the Views that display the model's state can be notified of the change, so that they are able to respond accordingly, re-rendering themselves with the new information. In a finished Backbone app, you don't have to write the glue code that looks into the DOM to find an element with a specific id, and update the HTML manually — when the model changes, the views simply update themselves.</p>
<a href="http://backbonejs.org" target="_blank">http://backbonejs.org</a>

<p>Models are a key component of Backbone applications. With model objects you can easily keep track of your data and update as needed. A strength of Backbone models is that you can synchronize your model data to the server.</p>

<img src="http://backbonejs.org/docs/images/intro-model-view.svg" alt="">

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500);

body {
    font-family: Roboto;
    padding: 16px;
    line-height: 1.5;
    font-weight: normal;
    color: #ccc;
    background: #292929;
}

h1, h2 {
    font-weight: normal;
}

a {
    color: #95baf6;
}

img {
    max-width: 100%;
    background: #fff;
}

JavaScript

console.clear();

// https://getpocket.com/a/read/531437400
// http://addyosmani.github.io/backbone-fundamentals/#collections
// http://backbonejs.org/docs/backbone.html#section-98
// http://beletsky.net/blog/categories/backbone-dot-js/

/** Example Model Class
 *
 *	extend correctly sets up the prototype chain, so subclasses created with extend can be further extended and subclassed as far as you like.
 */
var MovieModel = Backbone.Model.extend({
    defaults: {
        watchlist: false
    },
    
    // initialize method is run first by default
    initialize: function() {
        
        // By default, when a change occurs on the model a *change* event is fired
        // providing you with 2 options, the model and an options hash containing the
        // changed values
        this.on('change', function(model, options) {
            console.warn('Model changed', model, options);
        });
        
        // If you want to listen for a specific attribute change then you run on('change:attr')
        this.on('change:title', function(model, options) {
            console.warn('Model *title* attribute changed', model, options);
        });
    }
});

// Creating an instance of our Movie Backbone Model
var movie = new MovieModel();

console.group('Working with movie');
console.info('1) New Movie Model:', movie);
console.info('2) Use toJSON to get just the movie models attributes', movie.toJSON()); // {watchlist: false}
console.info('2) or just directly reference model.attributes', movie.attributes);

// Setting a new property on the Model
movie.set('title', 'Pulp Fiction');
console.info('3) Movie with title', movie.toJSON());

// Getting a model attribute- model.get(attribute)
console.info('4) Getting the movie *title* attribute:', movie.get('title'));
console.groupEnd();

console.log('----------------------------------------------');
console.log('----------------------------------------------');

// When creating an instance of a model, you can pass in the...