backbone js


                                                                                                           
                                                                                               
 
    BT OSMOSOFT 2013

A Lightning introduction...


Who wrote it
What it is
When
Why it was written
How to use it
Where to find out more



    BT OSMOSOFT 2013

Who


Open source component of DocumentCloud
(They also wrote Underscore)







    BT OSMOSOFT 2013

What


A JavaScript MV* Library

Pattern is up for debate but it certainly provides models and views

Collections, events, routing and data syncing is also provided


    BT OSMOSOFT 2013

Why


Give structure to web applications

Not a framework - loosely opinionated set of classes with useful methods you extend to fit your needs

More than one way to do things 



    BT OSMOSOFT 2013

HOW


We will quickly look at creating and using:

Models
Collections
Views
Events
Routing


    BT OSMOSOFT 2013

How


Extend a Backbone base class then instantiate when needed

Each class has some built-in methods that can be used as-is or overwritten




 BT OSMOSOFT 2013

Models

var Tiddler = Backbone.Model.extend({
        urlRoot: '/bags/tiddlyspace/tiddlers',
        idAttribute: 'title',
        defaults: {
            'title': 'New Tiddler',
            'text': '',
            'tags': [],
            'fields': {}
        }
    });
var tiddler = new Tiddler({ title: "Backbone JS" }):
tiddler.fetch({
    success: function () {
        //Do something with the loaded model
    }
});

    BT OSMOSOFT 2013

Collections

var Bag = Backbone.Collection.extend({
    model: Tiddler,
    url: '/bags/tiddlyspace/tiddlers'
});
var bag = new Bag();
bag.fetch({
    success: function () {
        //Do something with collection of models
    }
});
bag.get("Backbone JS"); //Returns the "Backbone JS" model
bag.create({ title: "Require JS" }); //Create & add new model



BT OSMOSOFT 2013

Views

var ListItemView = Backbone.View.extend({
    tagName: 'li',
    template: _.template(listItemTemplate)
    render: function () {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    }
});
var listItemView = new ListItemView({ model: tiddler });
listItem.view.render().el //Returns the list item DOM snippet




    BT OSMOSOFT 2013

What Defines a View?

A page?
A section of the page?
A single element?
var TiddlersListView = Backbone.View.extend({
  tagName: 'ul',
  render: function () {
    _.each(this.collection.models, function (tiddler) {
      $(this.el).append(
        new ListItemView({ model: tiddler }).render().el
      );
    }, this);
    return this;
    }
});
var listView = new TiddlersListView({ collection: bag });
 BT OSMOSOFT 2013

Events

var TiddlerEditView = Backbone.View.extend({

        events: {
            'click .submit-button': 'saveTiddler'
        },

        saveTiddler: function () {
            this.model.set({
                title: $('#tiddler-title').val(),
                text: $('#tiddler-content').val(),
                tags: $('#tiddler-tags').val().split(',')
            });

            this.model.save();
            return false;
        },       
    });


    BT OSMOSOFT 2013

Routing

Used for application state and navigation
Most examples use views for controller logic

var AppRouter = Backbone.Router.extend({
    routes:{
        'home': 'home',                
        'tiddler/:title': 'getTiddler',
        'tiddlers': 'getTiddlers',
        'newTiddler': 'newTiddler'
    },
    getTiddler: function (title) {
        //Load tiddler by title
        //Create view and render
    }
app/#tiddler/NewTiddler -> getTiddler("NewTiddler")
    BT OSMOSOFT 2013 

Where


http://backbonejs.org

http://addyosmani.github.com/backbone-fundamentals

https://github.com/pads/TiddlyBone

https://github.com/pads/yap

    BT OSMOSOFT 2013

Fin











BT OSMOSOFT 2013
Made with Slides.com