JavaScript Server Technologies

What is Backbone.js?

Backbone.js is a JavaScript library

which uses a RESTful JSON interface.

Backbone is very lightweight as it is

designed to build single page web

apps

What is Backbone.js?

Representational State Transfer

Used for interacting with content on remote systems

Create, Read, Update and Delete using HTTP

Requests GET, POST and PUT

Because REST is an architectural concept and not a

standard, there are no set rules for how a client and

service should use the set of HTTP verbs

RESTful message formats include JSON & XML

What is REST?

When using Backbone correctly, your data is

structured into “Models” with key-value binding.

Models can be created, updated, validated and

destroyed.

Elements in the UI are used to trigger a change

event to your models

When a change in the model is triggered, your

views respond accordingly

Add Structure To Your Data

Backbone models are for encapsulating entities that are

associated with data 

You extend Backbone.Model to provide a basic set of

functionality for managing changes in data

They provide accessor  and mutator  access to the data

through get() and set() methods.

Models

User = Backbone.Model.extend({ initialize: function(){

alert(“User Created"); },login: function(){

//Login code}

}); //Instantiate and set attributesvar user= new User({username: “johndoe”, email: “john@yahoo.com”});//To get attributesvar name = user.get(‘username’);

Simple Model Example

Collections are ordered sets of models

Collections get all of the Underscore array/collection

methods for convenient set manipulations.

// Create an array of models that can be passed in to a collection

var models = [ ]

for (var i=0; i < 5; i++) {

models.push(new Backbone.Model({ num: i })

}

// Create collection containing the models

var collection = new Backbone.Collection(models)

Collections

Events can be used with virtually any object

This allows the object to have the ability to bind

and trigger custom named events

Similar to JQuery Event Binding

Events

var object = {};

_.extend(object, Backbone.Events);

object.on("alert", function(msg) {

alert("Triggered " + msg);

});

object.trigger("alert", "an event");

//Can use namespaced if there are a large number on one page

book.on("change:title change:author", ...);

Event Example

Views are tied to the data/models that needs to

be displayed to the user

In Backbone, views act like controllers as well,

which is different than conventional MVC

Controllers and views are interactive

Views listen to events and act accordingly

Underscore.js is used for templating

Views

<div id=“userdiv"></div>

<script type="text/javascript">

UserView = Backbone.View.extend({

initialize: function(){

alert(“Welcome to the user view");

}

});

var user_view = new UserView({

el: $("#userdiv") });

</script>

View Example

<script type="text/template" id=“user_template">

<ul>

<li>Username:<%= user.get(‘username') %></li>

<li>Email: <%= user.get('email') %></li>

</ul>

</script>

render: function(){

// Compile the template using underscore

var template = _.template( $("#user_template").html(), {} );

// Load the compiled HTML into the Backbone "el"

this.$el.html( template );

}

Templates with Underscore.js

THAT’S IT!