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: “[email protected]”});//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!