BACKBONE JS

Why In a web application HTML and Javascript are used to

develop client side code Since HTML and JavaScript were never meant to be used

for writing full fledged web applications these applications had all the HTML and JavaScript code intermingled

This led to spaghetti code and these client side HTMLJavaScript applications (Single Page Applications or SPAs) became a maintenance nightmare

Hard to keep data in sync between the HTML UI JavaScript logic amp the database

Backbone JS Backbonejs is a lightweight framework that lets us

create single page applications in a structured manner

It is based on the Model-View-Controller (MV) It is best suited for creating single page

applications using a RESTful service for persisting data

-- Jeremy Ashkenas

Who Developed

Initial release - October 13 2010

Stable Release 112 February 20 2014

What it containsModel ndash

Backbone models by default provide the ways to persist data These models also provide ways to validate the data in the model before persisting it

Collections ndash

Collections are simply a group of models together

Views ndash

We define the HTML and associate with a view The view will then take care of handing the events of these HTML elements and populating and rendering these views based on data

Router ndash

For the request URL to determine the viewviews to be rendered routers are very helpful routers will look at the requested URL and then execute code based on the requested URL and then render the view to the user

Backbone JS Avoids storing state in the DOM Avoids jQuery callback soup Lightweight A good replacement for heavier

frameworks

Libraries to include while writing BackboneJS application -

ltscript src=httpcdnjscloudflarecomajaxlibsunderscorejs152underscorejsgtltscriptgt

ltscript src=httpcdnjscloudflarecomajaxlibsbackbonejs110backbone-minjsgtltscriptgt

ltscript src=httpscdnjscloudflarecomajaxlibsjquery203jqueryjsgtltscriptgt

Why In a web application HTML and Javascript are used to

develop client side code Since HTML and JavaScript were never meant to be used

for writing full fledged web applications these applications had all the HTML and JavaScript code intermingled

This led to spaghetti code and these client side HTMLJavaScript applications (Single Page Applications or SPAs) became a maintenance nightmare

Hard to keep data in sync between the HTML UI JavaScript logic amp the database

Backbone JS Backbonejs is a lightweight framework that lets us

create single page applications in a structured manner

It is based on the Model-View-Controller (MV) It is best suited for creating single page

applications using a RESTful service for persisting data

-- Jeremy Ashkenas

Who Developed

Initial release - October 13 2010

Stable Release 112 February 20 2014

What it containsModel ndash

Backbone models by default provide the ways to persist data These models also provide ways to validate the data in the model before persisting it

Collections ndash

Collections are simply a group of models together

Views ndash

We define the HTML and associate with a view The view will then take care of handing the events of these HTML elements and populating and rendering these views based on data

Router ndash

For the request URL to determine the viewviews to be rendered routers are very helpful routers will look at the requested URL and then execute code based on the requested URL and then render the view to the user

Backbone JS Avoids storing state in the DOM Avoids jQuery callback soup Lightweight A good replacement for heavier

frameworks

Libraries to include while writing BackboneJS application -

ltscript src=httpcdnjscloudflarecomajaxlibsunderscorejs152underscorejsgtltscriptgt

ltscript src=httpcdnjscloudflarecomajaxlibsbackbonejs110backbone-minjsgtltscriptgt

ltscript src=httpscdnjscloudflarecomajaxlibsjquery203jqueryjsgtltscriptgt

Backbone JS Backbonejs is a lightweight framework that lets us

create single page applications in a structured manner

It is based on the Model-View-Controller (MV) It is best suited for creating single page

applications using a RESTful service for persisting data

-- Jeremy Ashkenas

Who Developed

Initial release - October 13 2010

Stable Release 112 February 20 2014

What it containsModel ndash

Backbone models by default provide the ways to persist data These models also provide ways to validate the data in the model before persisting it

Collections ndash

Collections are simply a group of models together

Views ndash

We define the HTML and associate with a view The view will then take care of handing the events of these HTML elements and populating and rendering these views based on data

Router ndash

For the request URL to determine the viewviews to be rendered routers are very helpful routers will look at the requested URL and then execute code based on the requested URL and then render the view to the user

Backbone JS Avoids storing state in the DOM Avoids jQuery callback soup Lightweight A good replacement for heavier

frameworks

Libraries to include while writing BackboneJS application -

ltscript src=httpcdnjscloudflarecomajaxlibsunderscorejs152underscorejsgtltscriptgt

ltscript src=httpcdnjscloudflarecomajaxlibsbackbonejs110backbone-minjsgtltscriptgt

ltscript src=httpscdnjscloudflarecomajaxlibsjquery203jqueryjsgtltscriptgt

-- Jeremy Ashkenas

Who Developed

Initial release - October 13 2010

Stable Release 112 February 20 2014

What it containsModel ndash

Backbone models by default provide the ways to persist data These models also provide ways to validate the data in the model before persisting it

Collections ndash

Collections are simply a group of models together

Views ndash

We define the HTML and associate with a view The view will then take care of handing the events of these HTML elements and populating and rendering these views based on data

Router ndash

For the request URL to determine the viewviews to be rendered routers are very helpful routers will look at the requested URL and then execute code based on the requested URL and then render the view to the user

Backbone JS Avoids storing state in the DOM Avoids jQuery callback soup Lightweight A good replacement for heavier

frameworks

Libraries to include while writing BackboneJS application -

ltscript src=httpcdnjscloudflarecomajaxlibsunderscorejs152underscorejsgtltscriptgt

ltscript src=httpcdnjscloudflarecomajaxlibsbackbonejs110backbone-minjsgtltscriptgt

ltscript src=httpscdnjscloudflarecomajaxlibsjquery203jqueryjsgtltscriptgt

What it containsModel ndash

Backbone models by default provide the ways to persist data These models also provide ways to validate the data in the model before persisting it

Collections ndash

Collections are simply a group of models together

Views ndash

We define the HTML and associate with a view The view will then take care of handing the events of these HTML elements and populating and rendering these views based on data

Router ndash

For the request URL to determine the viewviews to be rendered routers are very helpful routers will look at the requested URL and then execute code based on the requested URL and then render the view to the user

Backbone JS Avoids storing state in the DOM Avoids jQuery callback soup Lightweight A good replacement for heavier

frameworks

Libraries to include while writing BackboneJS application -

ltscript src=httpcdnjscloudflarecomajaxlibsunderscorejs152underscorejsgtltscriptgt

ltscript src=httpcdnjscloudflarecomajaxlibsbackbonejs110backbone-minjsgtltscriptgt

ltscript src=httpscdnjscloudflarecomajaxlibsjquery203jqueryjsgtltscriptgt

Backbone JS Avoids storing state in the DOM Avoids jQuery callback soup Lightweight A good replacement for heavier

frameworks

Libraries to include while writing BackboneJS application -

ltscript src=httpcdnjscloudflarecomajaxlibsunderscorejs152underscorejsgtltscriptgt

ltscript src=httpcdnjscloudflarecomajaxlibsbackbonejs110backbone-minjsgtltscriptgt

ltscript src=httpscdnjscloudflarecomajaxlibsjquery203jqueryjsgtltscriptgt

Libraries to include while writing BackboneJS application -

ltscript src=httpcdnjscloudflarecomajaxlibsunderscorejs152underscorejsgtltscriptgt

ltscript src=httpcdnjscloudflarecomajaxlibsbackbonejs110backbone-minjsgtltscriptgt

ltscript src=httpscdnjscloudflarecomajaxlibsjquery203jqueryjsgtltscriptgt

Creating a Modelvar Book= BackboneModelextend( attributes functions)

Instantiating a modelvar book= new Book()

Destroying a modelbookdestroy() Orbookdestroy( success function () alert(The model has been destroyed successfully) )

Cloning a modelVar book2 = bookclone()

Model Attributes

while creating a model objectvar book = new Book( ID 1 BookName Sample bookrdquo)

while creating a modelvar Book = BackboneModelextend( defaults ID ldquo BookName )

setting and getting model attributesvar book = new Book()

bookset(ID 3) bookset(BookName C in a nutshell)

var bookId = bookget(ID) var bookName = bookget(BookName)

To check attribute existencebookhas(ID) true bookhas(author) false

Defining functions in a model

var Book = BackboneModelextend( defaults ID ldquo BookName showAlert function () alert(ID + thisget(ID) + BookName + thisget(BookName)) )

Whenever an object of model is created constructor will be internally called Constructor internally calls initialize() If we override constructor we need to call Backbone apply() - BackboneModelapply(this arguments) to provide default functionality for our constructor

var Book = BackboneModelextend(

defaults ID BookName initialize function () consolelog(Book has been intialized) constructor function (attributes options) consolelog(Books constructor had been called) BackboneModelapply(this arguments) mandatory )

Constructor

initialize function

var Book = BackboneModelextend( defaults ID BookName ldquo initialize function() consolelog(Book has been intialized) thisshowAlert() showAlert function () alert(ID + thisget(ID) + BookName + thisget(BookName)) )

Listening to Model Attribute changes

var Book = BackboneModelextend( defaults ID BookName initialize function() consolelog(Book has been intialized)

thison(change function() if(thishasChanged(ID)) consolelog(ID has been changed) if(thishasChanged(BookName)) consolelog(BookName has been changed) ) showAlert function () alert(ID + thisget(ID) + BookName + thisget(BookName)) )

Model identifiers - id cid and idAttribute

The cid or the client id is the auto-generated by backbone so that every model can be uniquely identified on the client

The id will be used to identify the model when the model data is actually being synced with server

var book2 = new Book()book2id = 3consolelog(book2id) output will be 3

We can also make use of Backbone lsquoIdAttributersquo to represent an ID for the model object Please watch next slide for an example

idAttribute

var Book = BackboneModelextend( defaults ID ldquo BookName ldquordquo idAttribute IDldquo initialize function () consolelog(Book has been intialized) constructor function (attributes options) consolelog(Books constructor had been called) BackboneModelapply(this arguments) )

Samplevar book3 = new Book( ID 43 )consolelog(book1id) output will be 43

Backbone provides library to validate the data before saving it

Validating the model

var Book = BackboneModelextend( defaults ID ldquo BookName ldquo idAttribute IDldquo initialize function () consolelog(Book has been initialized) thison(invalid function (model error) consolelog(Houston we have a problem + error) ) constructor function (attributes options) consolelog(Books constructor had been called) BackboneModelapply(this arguments) validate function (attr) if (attrID lt= 0) return Invalid value for ID supplied urlRoot httplocalhost51377apiBookslsquo)

var book4 = new Book( ID -4 )var result = book4isValid() false

var book5 = new Book() book5set(ID -1 validatetrue)

To validate data in a model

CRUD Operations ndash Create Read UpdateDelete

var book = new Book( BookName Backbone Book 43 )booksave( success function (model response options) consolelog(The model has been saved to the server) error function (model xhr options) consolelog(Something went wrong while saving the model) )

Saving the model

var book1 = new Book( ID 40 )

book1fetch( success function (bookResponse) consolelog(Found the book + bookResponseget(BookName)) )

Reading data

var book1 = new Book( ID 40 )

book1fetch( success function (bookResponse) consolelog(Found the book + bookResponseget(BookName)) bookResponseset(BookName bookResponseget(BookName) + _upd) bookResponsesave( success function (model respose options) consolelog(The model has been updated to the server) error function (model xhr options) consolelog(Something went wrong while updating the model) ) )

Updating data

Deleting data

var book2 = new Book( ID 40 )

book2destroy( success function (model respose options) consolelog(The model has deleted the server) error function (model xhr options) consolelog(Something went wrong while deleting the model) )

Override sync() function to change the manner in which Backbone persists models to the server You will be passed the type of request and the model in question By default makes a RESTful Ajax request to the modelrsquos url()

var BookEx = BackboneModelextend( defaults ID BookName idAttribute ID getCustomUrl function (method) switch (method) case read return httplocalhost51377apiBooks + thisid break case create return httplocalhost51377apiBooks break case update return httplocalhost51377apiBooks + thisid break case delete return httplocalhost51377apiBooks + thisid break sync function (method model options) options || (options = ) optionsurl = thisgetCustomUrl(methodtoLowerCase()) return Backbonesyncapply(this arguments) )

Sync function

var BooksCollection = BackboneCollectionextend( model Book )

Instantiating a collectionvar collection1 = new BooksCollection()var book3 = new Book( ID 3 BookName Book 3 ) collection1add(book3)

var book1 = new Book( ID 1 BookName Book 1 )var book2 = new Book( ID 2 BookName Book 2 ) var collection2 = new BooksCollection([book1 book2])

var book2_changed = new Book( ID 2 BookName Changed model ) collection2add(book2_changed merge true )

Collections

Some Backbone library for collectionshellip

var book0 = new Book( ID 0 BookName Book 0 )collection2add(book0 at0)

collection2remove(book0) to remove model from function

collection1reset() to empty the collection

collection2reset([book4 book5]) reset and add models to collection

consolelog(collection2length) prints 2

To fetch models from collectionvar bookRecieved = collection2at(3)

var index = collection2indexOf(bookRecieved)

var bookFetchedbyId = collection2get(2) fetch using model attributes

var BooksCollection = BackboneCollectionextend( model Book url httplocalhost51377apiBooks)

var collection4 = new BooksCollection() collection4fetch( success function (collection4 response) collection4each(function (item index all) itemset(BookName itemget(BookName) + _updated) itemsave() ) )

Saving Collection using REST service

Views

Creating a simple viewvar bookView= BackboneViewextend( initialize function() consolelog(sampleView has been created) )

var view1 = new bookView()

Associating model with a view

var book1 = new Book( ID 1 BookName Book 1 )var m_bookView = new bookView(model book1)

View for DOM elementvar view1 = new bookView( el $(sampleDiv) )

To create a DOM element dynamically with view

var sampleView2 = BackboneViewextend( tagname div id sampleDivlsquo )

var bookView = BackboneViewextend( tagname li model Book events click itemClicked itemClicked function () thisrender() render function () this$elhtml(ltligt + thismodelget(BookName) + ltligt) return this )

View listening to DOM events

var bookListView = BackboneViewextend( model BooksCollection initialize function() thislistenTo(thismodel add thismodelUpdated)

modelUpdated function() thisrender() )

View listening to Model changes

Removing a view from DOM

bookViewremove()

var myRouter = BackboneRouterextend( greeting null container null view1 null view2 null initialize function() thisgreeting = new GreetModel( Message Hello world ) thiscontainer = new ContainerView( el $(rAppContainer) model thisgreeting ) routes handleRoute1 view1 handleRoute1 view2 handleRoute2ldquo handleRoute1 function () if (thisview1 == null) thisview1 = new View1( model thisgreeting ) thiscontainermyChildView = thisview1 thiscontainerrender() )

Routers

To make Backbone listen to Routes

$(document)ready(function () router = new myRouter() Backbonehistorystart() )

To navigate to view within the applicationrouternavigate(view1)

httpsDemohtmlview1

httpsDemohtmlview2

Model Attributes

while creating a model objectvar book = new Book( ID 1 BookName Sample bookrdquo)

while creating a modelvar Book = BackboneModelextend( defaults ID ldquo BookName )

setting and getting model attributesvar book = new Book()

bookset(ID 3) bookset(BookName C in a nutshell)

var bookId = bookget(ID) var bookName = bookget(BookName)

To check attribute existencebookhas(ID) true bookhas(author) false

Defining functions in a model

var Book = BackboneModelextend( defaults ID ldquo BookName showAlert function () alert(ID + thisget(ID) + BookName + thisget(BookName)) )

Whenever an object of model is created constructor will be internally called Constructor internally calls initialize() If we override constructor we need to call Backbone apply() - BackboneModelapply(this arguments) to provide default functionality for our constructor

var Book = BackboneModelextend(

defaults ID BookName initialize function () consolelog(Book has been intialized) constructor function (attributes options) consolelog(Books constructor had been called) BackboneModelapply(this arguments) mandatory )

Constructor

initialize function

var Book = BackboneModelextend( defaults ID BookName ldquo initialize function() consolelog(Book has been intialized) thisshowAlert() showAlert function () alert(ID + thisget(ID) + BookName + thisget(BookName)) )

Listening to Model Attribute changes

var Book = BackboneModelextend( defaults ID BookName initialize function() consolelog(Book has been intialized)

thison(change function() if(thishasChanged(ID)) consolelog(ID has been changed) if(thishasChanged(BookName)) consolelog(BookName has been changed) ) showAlert function () alert(ID + thisget(ID) + BookName + thisget(BookName)) )

Model identifiers - id cid and idAttribute

The cid or the client id is the auto-generated by backbone so that every model can be uniquely identified on the client

The id will be used to identify the model when the model data is actually being synced with server

var book2 = new Book()book2id = 3consolelog(book2id) output will be 3

We can also make use of Backbone lsquoIdAttributersquo to represent an ID for the model object Please watch next slide for an example

idAttribute

var Book = BackboneModelextend( defaults ID ldquo BookName ldquordquo idAttribute IDldquo initialize function () consolelog(Book has been intialized) constructor function (attributes options) consolelog(Books constructor had been called) BackboneModelapply(this arguments) )

Samplevar book3 = new Book( ID 43 )consolelog(book1id) output will be 43

Backbone provides library to validate the data before saving it

Validating the model

var Book = BackboneModelextend( defaults ID ldquo BookName ldquo idAttribute IDldquo initialize function () consolelog(Book has been initialized) thison(invalid function (model error) consolelog(Houston we have a problem + error) ) constructor function (attributes options) consolelog(Books constructor had been called) BackboneModelapply(this arguments) validate function (attr) if (attrID lt= 0) return Invalid value for ID supplied urlRoot httplocalhost51377apiBookslsquo)

var book4 = new Book( ID -4 )var result = book4isValid() false

var book5 = new Book() book5set(ID -1 validatetrue)

To validate data in a model

CRUD Operations ndash Create Read UpdateDelete

var book = new Book( BookName Backbone Book 43 )booksave( success function (model response options) consolelog(The model has been saved to the server) error function (model xhr options) consolelog(Something went wrong while saving the model) )

Saving the model

var book1 = new Book( ID 40 )

book1fetch( success function (bookResponse) consolelog(Found the book + bookResponseget(BookName)) )

Reading data

var book1 = new Book( ID 40 )

book1fetch( success function (bookResponse) consolelog(Found the book + bookResponseget(BookName)) bookResponseset(BookName bookResponseget(BookName) + _upd) bookResponsesave( success function (model respose options) consolelog(The model has been updated to the server) error function (model xhr options) consolelog(Something went wrong while updating the model) ) )

Updating data

Deleting data

var book2 = new Book( ID 40 )

book2destroy( success function (model respose options) consolelog(The model has deleted the server) error function (model xhr options) consolelog(Something went wrong while deleting the model) )

Override sync() function to change the manner in which Backbone persists models to the server You will be passed the type of request and the model in question By default makes a RESTful Ajax request to the modelrsquos url()

var BookEx = BackboneModelextend( defaults ID BookName idAttribute ID getCustomUrl function (method) switch (method) case read return httplocalhost51377apiBooks + thisid break case create return httplocalhost51377apiBooks break case update return httplocalhost51377apiBooks + thisid break case delete return httplocalhost51377apiBooks + thisid break sync function (method model options) options || (options = ) optionsurl = thisgetCustomUrl(methodtoLowerCase()) return Backbonesyncapply(this arguments) )

Sync function

var BooksCollection = BackboneCollectionextend( model Book )

Instantiating a collectionvar collection1 = new BooksCollection()var book3 = new Book( ID 3 BookName Book 3 ) collection1add(book3)

var book1 = new Book( ID 1 BookName Book 1 )var book2 = new Book( ID 2 BookName Book 2 ) var collection2 = new BooksCollection([book1 book2])

var book2_changed = new Book( ID 2 BookName Changed model ) collection2add(book2_changed merge true )

Collections

Some Backbone library for collectionshellip

var book0 = new Book( ID 0 BookName Book 0 )collection2add(book0 at0)

collection2remove(book0) to remove model from function

collection1reset() to empty the collection

collection2reset([book4 book5]) reset and add models to collection

consolelog(collection2length) prints 2

To fetch models from collectionvar bookRecieved = collection2at(3)

var index = collection2indexOf(bookRecieved)

var bookFetchedbyId = collection2get(2) fetch using model attributes

var BooksCollection = BackboneCollectionextend( model Book url httplocalhost51377apiBooks)

var collection4 = new BooksCollection() collection4fetch( success function (collection4 response) collection4each(function (item index all) itemset(BookName itemget(BookName) + _updated) itemsave() ) )

Saving Collection using REST service

Views

Creating a simple viewvar bookView= BackboneViewextend( initialize function() consolelog(sampleView has been created) )

var view1 = new bookView()

Associating model with a view

var book1 = new Book( ID 1 BookName Book 1 )var m_bookView = new bookView(model book1)

View for DOM elementvar view1 = new bookView( el $(sampleDiv) )

To create a DOM element dynamically with view

var sampleView2 = BackboneViewextend( tagname div id sampleDivlsquo )

var bookView = BackboneViewextend( tagname li model Book events click itemClicked itemClicked function () thisrender() render function () this$elhtml(ltligt + thismodelget(BookName) + ltligt) return this )

View listening to DOM events

var bookListView = BackboneViewextend( model BooksCollection initialize function() thislistenTo(thismodel add thismodelUpdated)

modelUpdated function() thisrender() )

View listening to Model changes

Removing a view from DOM

bookViewremove()

var myRouter = BackboneRouterextend( greeting null container null view1 null view2 null initialize function() thisgreeting = new GreetModel( Message Hello world ) thiscontainer = new ContainerView( el $(rAppContainer) model thisgreeting ) routes handleRoute1 view1 handleRoute1 view2 handleRoute2ldquo handleRoute1 function () if (thisview1 == null) thisview1 = new View1( model thisgreeting ) thiscontainermyChildView = thisview1 thiscontainerrender() )

Routers

To make Backbone listen to Routes

$(document)ready(function () router = new myRouter() Backbonehistorystart() )

To navigate to view within the applicationrouternavigate(view1)

httpsDemohtmlview1

httpsDemohtmlview2

Defining functions in a model

var Book = BackboneModelextend( defaults ID ldquo BookName showAlert function () alert(ID + thisget(ID) + BookName + thisget(BookName)) )

Whenever an object of model is created constructor will be internally called Constructor internally calls initialize() If we override constructor we need to call Backbone apply() - BackboneModelapply(this arguments) to provide default functionality for our constructor

var Book = BackboneModelextend(

defaults ID BookName initialize function () consolelog(Book has been intialized) constructor function (attributes options) consolelog(Books constructor had been called) BackboneModelapply(this arguments) mandatory )

Constructor

initialize function

var Book = BackboneModelextend( defaults ID BookName ldquo initialize function() consolelog(Book has been intialized) thisshowAlert() showAlert function () alert(ID + thisget(ID) + BookName + thisget(BookName)) )

Listening to Model Attribute changes

var Book = BackboneModelextend( defaults ID BookName initialize function() consolelog(Book has been intialized)

thison(change function() if(thishasChanged(ID)) consolelog(ID has been changed) if(thishasChanged(BookName)) consolelog(BookName has been changed) ) showAlert function () alert(ID + thisget(ID) + BookName + thisget(BookName)) )

Model identifiers - id cid and idAttribute

The cid or the client id is the auto-generated by backbone so that every model can be uniquely identified on the client

The id will be used to identify the model when the model data is actually being synced with server

var book2 = new Book()book2id = 3consolelog(book2id) output will be 3

We can also make use of Backbone lsquoIdAttributersquo to represent an ID for the model object Please watch next slide for an example

idAttribute

var Book = BackboneModelextend( defaults ID ldquo BookName ldquordquo idAttribute IDldquo initialize function () consolelog(Book has been intialized) constructor function (attributes options) consolelog(Books constructor had been called) BackboneModelapply(this arguments) )

Samplevar book3 = new Book( ID 43 )consolelog(book1id) output will be 43

Backbone provides library to validate the data before saving it

Validating the model

var Book = BackboneModelextend( defaults ID ldquo BookName ldquo idAttribute IDldquo initialize function () consolelog(Book has been initialized) thison(invalid function (model error) consolelog(Houston we have a problem + error) ) constructor function (attributes options) consolelog(Books constructor had been called) BackboneModelapply(this arguments) validate function (attr) if (attrID lt= 0) return Invalid value for ID supplied urlRoot httplocalhost51377apiBookslsquo)

var book4 = new Book( ID -4 )var result = book4isValid() false

var book5 = new Book() book5set(ID -1 validatetrue)

To validate data in a model

CRUD Operations ndash Create Read UpdateDelete

var book = new Book( BookName Backbone Book 43 )booksave( success function (model response options) consolelog(The model has been saved to the server) error function (model xhr options) consolelog(Something went wrong while saving the model) )

Saving the model

var book1 = new Book( ID 40 )

book1fetch( success function (bookResponse) consolelog(Found the book + bookResponseget(BookName)) )

Reading data

var book1 = new Book( ID 40 )

book1fetch( success function (bookResponse) consolelog(Found the book + bookResponseget(BookName)) bookResponseset(BookName bookResponseget(BookName) + _upd) bookResponsesave( success function (model respose options) consolelog(The model has been updated to the server) error function (model xhr options) consolelog(Something went wrong while updating the model) ) )

Updating data

Deleting data

var book2 = new Book( ID 40 )

book2destroy( success function (model respose options) consolelog(The model has deleted the server) error function (model xhr options) consolelog(Something went wrong while deleting the model) )

Override sync() function to change the manner in which Backbone persists models to the server You will be passed the type of request and the model in question By default makes a RESTful Ajax request to the modelrsquos url()

var BookEx = BackboneModelextend( defaults ID BookName idAttribute ID getCustomUrl function (method) switch (method) case read return httplocalhost51377apiBooks + thisid break case create return httplocalhost51377apiBooks break case update return httplocalhost51377apiBooks + thisid break case delete return httplocalhost51377apiBooks + thisid break sync function (method model options) options || (options = ) optionsurl = thisgetCustomUrl(methodtoLowerCase()) return Backbonesyncapply(this arguments) )

Sync function

var BooksCollection = BackboneCollectionextend( model Book )

Instantiating a collectionvar collection1 = new BooksCollection()var book3 = new Book( ID 3 BookName Book 3 ) collection1add(book3)

var book1 = new Book( ID 1 BookName Book 1 )var book2 = new Book( ID 2 BookName Book 2 ) var collection2 = new BooksCollection([book1 book2])

var book2_changed = new Book( ID 2 BookName Changed model ) collection2add(book2_changed merge true )

Collections

Some Backbone library for collectionshellip

var book0 = new Book( ID 0 BookName Book 0 )collection2add(book0 at0)

collection2remove(book0) to remove model from function

collection1reset() to empty the collection

collection2reset([book4 book5]) reset and add models to collection

consolelog(collection2length) prints 2

To fetch models from collectionvar bookRecieved = collection2at(3)

var index = collection2indexOf(bookRecieved)

var bookFetchedbyId = collection2get(2) fetch using model attributes

var BooksCollection = BackboneCollectionextend( model Book url httplocalhost51377apiBooks)

var collection4 = new BooksCollection() collection4fetch( success function (collection4 response) collection4each(function (item index all) itemset(BookName itemget(BookName) + _updated) itemsave() ) )

Saving Collection using REST service

Views

Creating a simple viewvar bookView= BackboneViewextend( initialize function() consolelog(sampleView has been created) )

var view1 = new bookView()

Associating model with a view

var book1 = new Book( ID 1 BookName Book 1 )var m_bookView = new bookView(model book1)

View for DOM elementvar view1 = new bookView( el $(sampleDiv) )

To create a DOM element dynamically with view

var sampleView2 = BackboneViewextend( tagname div id sampleDivlsquo )

var bookView = BackboneViewextend( tagname li model Book events click itemClicked itemClicked function () thisrender() render function () this$elhtml(ltligt + thismodelget(BookName) + ltligt) return this )

View listening to DOM events

var bookListView = BackboneViewextend( model BooksCollection initialize function() thislistenTo(thismodel add thismodelUpdated)

modelUpdated function() thisrender() )

View listening to Model changes

Removing a view from DOM

bookViewremove()

var myRouter = BackboneRouterextend( greeting null container null view1 null view2 null initialize function() thisgreeting = new GreetModel( Message Hello world ) thiscontainer = new ContainerView( el $(rAppContainer) model thisgreeting ) routes handleRoute1 view1 handleRoute1 view2 handleRoute2ldquo handleRoute1 function () if (thisview1 == null) thisview1 = new View1( model thisgreeting ) thiscontainermyChildView = thisview1 thiscontainerrender() )

Routers

To make Backbone listen to Routes

$(document)ready(function () router = new myRouter() Backbonehistorystart() )

To navigate to view within the applicationrouternavigate(view1)

httpsDemohtmlview1

httpsDemohtmlview2

Whenever an object of model is created constructor will be internally called Constructor internally calls initialize() If we override constructor we need to call Backbone apply() - BackboneModelapply(this arguments) to provide default functionality for our constructor

var Book = BackboneModelextend(

defaults ID BookName initialize function () consolelog(Book has been intialized) constructor function (attributes options) consolelog(Books constructor had been called) BackboneModelapply(this arguments) mandatory )

Constructor

initialize function

var Book = BackboneModelextend( defaults ID BookName ldquo initialize function() consolelog(Book has been intialized) thisshowAlert() showAlert function () alert(ID + thisget(ID) + BookName + thisget(BookName)) )

Listening to Model Attribute changes

var Book = BackboneModelextend( defaults ID BookName initialize function() consolelog(Book has been intialized)

thison(change function() if(thishasChanged(ID)) consolelog(ID has been changed) if(thishasChanged(BookName)) consolelog(BookName has been changed) ) showAlert function () alert(ID + thisget(ID) + BookName + thisget(BookName)) )

Model identifiers - id cid and idAttribute

The cid or the client id is the auto-generated by backbone so that every model can be uniquely identified on the client

The id will be used to identify the model when the model data is actually being synced with server

var book2 = new Book()book2id = 3consolelog(book2id) output will be 3

We can also make use of Backbone lsquoIdAttributersquo to represent an ID for the model object Please watch next slide for an example

idAttribute

var Book = BackboneModelextend( defaults ID ldquo BookName ldquordquo idAttribute IDldquo initialize function () consolelog(Book has been intialized) constructor function (attributes options) consolelog(Books constructor had been called) BackboneModelapply(this arguments) )

Samplevar book3 = new Book( ID 43 )consolelog(book1id) output will be 43

Backbone provides library to validate the data before saving it

Validating the model

var Book = BackboneModelextend( defaults ID ldquo BookName ldquo idAttribute IDldquo initialize function () consolelog(Book has been initialized) thison(invalid function (model error) consolelog(Houston we have a problem + error) ) constructor function (attributes options) consolelog(Books constructor had been called) BackboneModelapply(this arguments) validate function (attr) if (attrID lt= 0) return Invalid value for ID supplied urlRoot httplocalhost51377apiBookslsquo)

var book4 = new Book( ID -4 )var result = book4isValid() false

var book5 = new Book() book5set(ID -1 validatetrue)

To validate data in a model

CRUD Operations ndash Create Read UpdateDelete

var book = new Book( BookName Backbone Book 43 )booksave( success function (model response options) consolelog(The model has been saved to the server) error function (model xhr options) consolelog(Something went wrong while saving the model) )

Saving the model

var book1 = new Book( ID 40 )

book1fetch( success function (bookResponse) consolelog(Found the book + bookResponseget(BookName)) )

Reading data

var book1 = new Book( ID 40 )

book1fetch( success function (bookResponse) consolelog(Found the book + bookResponseget(BookName)) bookResponseset(BookName bookResponseget(BookName) + _upd) bookResponsesave( success function (model respose options) consolelog(The model has been updated to the server) error function (model xhr options) consolelog(Something went wrong while updating the model) ) )

Updating data

Deleting data

var book2 = new Book( ID 40 )

book2destroy( success function (model respose options) consolelog(The model has deleted the server) error function (model xhr options) consolelog(Something went wrong while deleting the model) )

Override sync() function to change the manner in which Backbone persists models to the server You will be passed the type of request and the model in question By default makes a RESTful Ajax request to the modelrsquos url()

var BookEx = BackboneModelextend( defaults ID BookName idAttribute ID getCustomUrl function (method) switch (method) case read return httplocalhost51377apiBooks + thisid break case create return httplocalhost51377apiBooks break case update return httplocalhost51377apiBooks + thisid break case delete return httplocalhost51377apiBooks + thisid break sync function (method model options) options || (options = ) optionsurl = thisgetCustomUrl(methodtoLowerCase()) return Backbonesyncapply(this arguments) )

Sync function

var BooksCollection = BackboneCollectionextend( model Book )

Instantiating a collectionvar collection1 = new BooksCollection()var book3 = new Book( ID 3 BookName Book 3 ) collection1add(book3)

var book1 = new Book( ID 1 BookName Book 1 )var book2 = new Book( ID 2 BookName Book 2 ) var collection2 = new BooksCollection([book1 book2])

var book2_changed = new Book( ID 2 BookName Changed model ) collection2add(book2_changed merge true )

Collections

Some Backbone library for collectionshellip

var book0 = new Book( ID 0 BookName Book 0 )collection2add(book0 at0)

collection2remove(book0) to remove model from function

collection1reset() to empty the collection

collection2reset([book4 book5]) reset and add models to collection

consolelog(collection2length) prints 2

To fetch models from collectionvar bookRecieved = collection2at(3)

var index = collection2indexOf(bookRecieved)

var bookFetchedbyId = collection2get(2) fetch using model attributes

var BooksCollection = BackboneCollectionextend( model Book url httplocalhost51377apiBooks)

var collection4 = new BooksCollection() collection4fetch( success function (collection4 response) collection4each(function (item index all) itemset(BookName itemget(BookName) + _updated) itemsave() ) )

Saving Collection using REST service

Views

Creating a simple viewvar bookView= BackboneViewextend( initialize function() consolelog(sampleView has been created) )

var view1 = new bookView()

Associating model with a view

var book1 = new Book( ID 1 BookName Book 1 )var m_bookView = new bookView(model book1)

View for DOM elementvar view1 = new bookView( el $(sampleDiv) )

To create a DOM element dynamically with view

var sampleView2 = BackboneViewextend( tagname div id sampleDivlsquo )

var bookView = BackboneViewextend( tagname li model Book events click itemClicked itemClicked function () thisrender() render function () this$elhtml(ltligt + thismodelget(BookName) + ltligt) return this )

View listening to DOM events

var bookListView = BackboneViewextend( model BooksCollection initialize function() thislistenTo(thismodel add thismodelUpdated)

modelUpdated function() thisrender() )

View listening to Model changes

Removing a view from DOM

bookViewremove()

var myRouter = BackboneRouterextend( greeting null container null view1 null view2 null initialize function() thisgreeting = new GreetModel( Message Hello world ) thiscontainer = new ContainerView( el $(rAppContainer) model thisgreeting ) routes handleRoute1 view1 handleRoute1 view2 handleRoute2ldquo handleRoute1 function () if (thisview1 == null) thisview1 = new View1( model thisgreeting ) thiscontainermyChildView = thisview1 thiscontainerrender() )

Routers

To make Backbone listen to Routes

$(document)ready(function () router = new myRouter() Backbonehistorystart() )

To navigate to view within the applicationrouternavigate(view1)

httpsDemohtmlview1

httpsDemohtmlview2

var Book = BackboneModelextend(

defaults ID BookName initialize function () consolelog(Book has been intialized) constructor function (attributes options) consolelog(Books constructor had been called) BackboneModelapply(this arguments) mandatory )

Constructor

initialize function

var Book = BackboneModelextend( defaults ID BookName ldquo initialize function() consolelog(Book has been intialized) thisshowAlert() showAlert function () alert(ID + thisget(ID) + BookName + thisget(BookName)) )

Listening to Model Attribute changes

var Book = BackboneModelextend( defaults ID BookName initialize function() consolelog(Book has been intialized)

thison(change function() if(thishasChanged(ID)) consolelog(ID has been changed) if(thishasChanged(BookName)) consolelog(BookName has been changed) ) showAlert function () alert(ID + thisget(ID) + BookName + thisget(BookName)) )

Model identifiers - id cid and idAttribute

The cid or the client id is the auto-generated by backbone so that every model can be uniquely identified on the client

The id will be used to identify the model when the model data is actually being synced with server

var book2 = new Book()book2id = 3consolelog(book2id) output will be 3

We can also make use of Backbone lsquoIdAttributersquo to represent an ID for the model object Please watch next slide for an example

idAttribute

var Book = BackboneModelextend( defaults ID ldquo BookName ldquordquo idAttribute IDldquo initialize function () consolelog(Book has been intialized) constructor function (attributes options) consolelog(Books constructor had been called) BackboneModelapply(this arguments) )

Samplevar book3 = new Book( ID 43 )consolelog(book1id) output will be 43

Backbone provides library to validate the data before saving it

Validating the model

var Book = BackboneModelextend( defaults ID ldquo BookName ldquo idAttribute IDldquo initialize function () consolelog(Book has been initialized) thison(invalid function (model error) consolelog(Houston we have a problem + error) ) constructor function (attributes options) consolelog(Books constructor had been called) BackboneModelapply(this arguments) validate function (attr) if (attrID lt= 0) return Invalid value for ID supplied urlRoot httplocalhost51377apiBookslsquo)

var book4 = new Book( ID -4 )var result = book4isValid() false

var book5 = new Book() book5set(ID -1 validatetrue)

To validate data in a model

CRUD Operations ndash Create Read UpdateDelete

var book = new Book( BookName Backbone Book 43 )booksave( success function (model response options) consolelog(The model has been saved to the server) error function (model xhr options) consolelog(Something went wrong while saving the model) )

Saving the model

var book1 = new Book( ID 40 )

book1fetch( success function (bookResponse) consolelog(Found the book + bookResponseget(BookName)) )

Reading data

var book1 = new Book( ID 40 )

book1fetch( success function (bookResponse) consolelog(Found the book + bookResponseget(BookName)) bookResponseset(BookName bookResponseget(BookName) + _upd) bookResponsesave( success function (model respose options) consolelog(The model has been updated to the server) error function (model xhr options) consolelog(Something went wrong while updating the model) ) )

Updating data

Deleting data

var book2 = new Book( ID 40 )

book2destroy( success function (model respose options) consolelog(The model has deleted the server) error function (model xhr options) consolelog(Something went wrong while deleting the model) )

Override sync() function to change the manner in which Backbone persists models to the server You will be passed the type of request and the model in question By default makes a RESTful Ajax request to the modelrsquos url()

var BookEx = BackboneModelextend( defaults ID BookName idAttribute ID getCustomUrl function (method) switch (method) case read return httplocalhost51377apiBooks + thisid break case create return httplocalhost51377apiBooks break case update return httplocalhost51377apiBooks + thisid break case delete return httplocalhost51377apiBooks + thisid break sync function (method model options) options || (options = ) optionsurl = thisgetCustomUrl(methodtoLowerCase()) return Backbonesyncapply(this arguments) )

Sync function

var BooksCollection = BackboneCollectionextend( model Book )

Instantiating a collectionvar collection1 = new BooksCollection()var book3 = new Book( ID 3 BookName Book 3 ) collection1add(book3)

var book1 = new Book( ID 1 BookName Book 1 )var book2 = new Book( ID 2 BookName Book 2 ) var collection2 = new BooksCollection([book1 book2])

var book2_changed = new Book( ID 2 BookName Changed model ) collection2add(book2_changed merge true )

Collections

Some Backbone library for collectionshellip

var book0 = new Book( ID 0 BookName Book 0 )collection2add(book0 at0)

collection2remove(book0) to remove model from function

collection1reset() to empty the collection

collection2reset([book4 book5]) reset and add models to collection

consolelog(collection2length) prints 2

To fetch models from collectionvar bookRecieved = collection2at(3)

var index = collection2indexOf(bookRecieved)

var bookFetchedbyId = collection2get(2) fetch using model attributes

var BooksCollection = BackboneCollectionextend( model Book url httplocalhost51377apiBooks)

var collection4 = new BooksCollection() collection4fetch( success function (collection4 response) collection4each(function (item index all) itemset(BookName itemget(BookName) + _updated) itemsave() ) )

Saving Collection using REST service

Views

Creating a simple viewvar bookView= BackboneViewextend( initialize function() consolelog(sampleView has been created) )

var view1 = new bookView()

Associating model with a view

var book1 = new Book( ID 1 BookName Book 1 )var m_bookView = new bookView(model book1)

View for DOM elementvar view1 = new bookView( el $(sampleDiv) )

To create a DOM element dynamically with view

var sampleView2 = BackboneViewextend( tagname div id sampleDivlsquo )

var bookView = BackboneViewextend( tagname li model Book events click itemClicked itemClicked function () thisrender() render function () this$elhtml(ltligt + thismodelget(BookName) + ltligt) return this )

View listening to DOM events

var bookListView = BackboneViewextend( model BooksCollection initialize function() thislistenTo(thismodel add thismodelUpdated)

modelUpdated function() thisrender() )

View listening to Model changes

Removing a view from DOM

bookViewremove()

var myRouter = BackboneRouterextend( greeting null container null view1 null view2 null initialize function() thisgreeting = new GreetModel( Message Hello world ) thiscontainer = new ContainerView( el $(rAppContainer) model thisgreeting ) routes handleRoute1 view1 handleRoute1 view2 handleRoute2ldquo handleRoute1 function () if (thisview1 == null) thisview1 = new View1( model thisgreeting ) thiscontainermyChildView = thisview1 thiscontainerrender() )

Routers

To make Backbone listen to Routes

$(document)ready(function () router = new myRouter() Backbonehistorystart() )

To navigate to view within the applicationrouternavigate(view1)

httpsDemohtmlview1

httpsDemohtmlview2

initialize function

var Book = BackboneModelextend( defaults ID BookName ldquo initialize function() consolelog(Book has been intialized) thisshowAlert() showAlert function () alert(ID + thisget(ID) + BookName + thisget(BookName)) )

Listening to Model Attribute changes

var Book = BackboneModelextend( defaults ID BookName initialize function() consolelog(Book has been intialized)

thison(change function() if(thishasChanged(ID)) consolelog(ID has been changed) if(thishasChanged(BookName)) consolelog(BookName has been changed) ) showAlert function () alert(ID + thisget(ID) + BookName + thisget(BookName)) )

Model identifiers - id cid and idAttribute

The cid or the client id is the auto-generated by backbone so that every model can be uniquely identified on the client

The id will be used to identify the model when the model data is actually being synced with server

var book2 = new Book()book2id = 3consolelog(book2id) output will be 3

We can also make use of Backbone lsquoIdAttributersquo to represent an ID for the model object Please watch next slide for an example

idAttribute

var Book = BackboneModelextend( defaults ID ldquo BookName ldquordquo idAttribute IDldquo initialize function () consolelog(Book has been intialized) constructor function (attributes options) consolelog(Books constructor had been called) BackboneModelapply(this arguments) )

Samplevar book3 = new Book( ID 43 )consolelog(book1id) output will be 43

Backbone provides library to validate the data before saving it

Validating the model

var Book = BackboneModelextend( defaults ID ldquo BookName ldquo idAttribute IDldquo initialize function () consolelog(Book has been initialized) thison(invalid function (model error) consolelog(Houston we have a problem + error) ) constructor function (attributes options) consolelog(Books constructor had been called) BackboneModelapply(this arguments) validate function (attr) if (attrID lt= 0) return Invalid value for ID supplied urlRoot httplocalhost51377apiBookslsquo)

var book4 = new Book( ID -4 )var result = book4isValid() false

var book5 = new Book() book5set(ID -1 validatetrue)

To validate data in a model

CRUD Operations ndash Create Read UpdateDelete

var book = new Book( BookName Backbone Book 43 )booksave( success function (model response options) consolelog(The model has been saved to the server) error function (model xhr options) consolelog(Something went wrong while saving the model) )

Saving the model

var book1 = new Book( ID 40 )

book1fetch( success function (bookResponse) consolelog(Found the book + bookResponseget(BookName)) )

Reading data

var book1 = new Book( ID 40 )

book1fetch( success function (bookResponse) consolelog(Found the book + bookResponseget(BookName)) bookResponseset(BookName bookResponseget(BookName) + _upd) bookResponsesave( success function (model respose options) consolelog(The model has been updated to the server) error function (model xhr options) consolelog(Something went wrong while updating the model) ) )

Updating data

Deleting data

var book2 = new Book( ID 40 )

book2destroy( success function (model respose options) consolelog(The model has deleted the server) error function (model xhr options) consolelog(Something went wrong while deleting the model) )

Override sync() function to change the manner in which Backbone persists models to the server You will be passed the type of request and the model in question By default makes a RESTful Ajax request to the modelrsquos url()

var BookEx = BackboneModelextend( defaults ID BookName idAttribute ID getCustomUrl function (method) switch (method) case read return httplocalhost51377apiBooks + thisid break case create return httplocalhost51377apiBooks break case update return httplocalhost51377apiBooks + thisid break case delete return httplocalhost51377apiBooks + thisid break sync function (method model options) options || (options = ) optionsurl = thisgetCustomUrl(methodtoLowerCase()) return Backbonesyncapply(this arguments) )

Sync function

var BooksCollection = BackboneCollectionextend( model Book )

Instantiating a collectionvar collection1 = new BooksCollection()var book3 = new Book( ID 3 BookName Book 3 ) collection1add(book3)

var book1 = new Book( ID 1 BookName Book 1 )var book2 = new Book( ID 2 BookName Book 2 ) var collection2 = new BooksCollection([book1 book2])

var book2_changed = new Book( ID 2 BookName Changed model ) collection2add(book2_changed merge true )

Collections

Some Backbone library for collectionshellip

var book0 = new Book( ID 0 BookName Book 0 )collection2add(book0 at0)

collection2remove(book0) to remove model from function

collection1reset() to empty the collection

collection2reset([book4 book5]) reset and add models to collection

consolelog(collection2length) prints 2

To fetch models from collectionvar bookRecieved = collection2at(3)

var index = collection2indexOf(bookRecieved)

var bookFetchedbyId = collection2get(2) fetch using model attributes

var BooksCollection = BackboneCollectionextend( model Book url httplocalhost51377apiBooks)

var collection4 = new BooksCollection() collection4fetch( success function (collection4 response) collection4each(function (item index all) itemset(BookName itemget(BookName) + _updated) itemsave() ) )

Saving Collection using REST service

Views

Creating a simple viewvar bookView= BackboneViewextend( initialize function() consolelog(sampleView has been created) )

var view1 = new bookView()

Associating model with a view

var book1 = new Book( ID 1 BookName Book 1 )var m_bookView = new bookView(model book1)

View for DOM elementvar view1 = new bookView( el $(sampleDiv) )

To create a DOM element dynamically with view

var sampleView2 = BackboneViewextend( tagname div id sampleDivlsquo )

var bookView = BackboneViewextend( tagname li model Book events click itemClicked itemClicked function () thisrender() render function () this$elhtml(ltligt + thismodelget(BookName) + ltligt) return this )

View listening to DOM events

var bookListView = BackboneViewextend( model BooksCollection initialize function() thislistenTo(thismodel add thismodelUpdated)

modelUpdated function() thisrender() )

View listening to Model changes

Removing a view from DOM

bookViewremove()

var myRouter = BackboneRouterextend( greeting null container null view1 null view2 null initialize function() thisgreeting = new GreetModel( Message Hello world ) thiscontainer = new ContainerView( el $(rAppContainer) model thisgreeting ) routes handleRoute1 view1 handleRoute1 view2 handleRoute2ldquo handleRoute1 function () if (thisview1 == null) thisview1 = new View1( model thisgreeting ) thiscontainermyChildView = thisview1 thiscontainerrender() )

Routers

To make Backbone listen to Routes

$(document)ready(function () router = new myRouter() Backbonehistorystart() )

To navigate to view within the applicationrouternavigate(view1)

httpsDemohtmlview1

httpsDemohtmlview2

Listening to Model Attribute changes

var Book = BackboneModelextend( defaults ID BookName initialize function() consolelog(Book has been intialized)

thison(change function() if(thishasChanged(ID)) consolelog(ID has been changed) if(thishasChanged(BookName)) consolelog(BookName has been changed) ) showAlert function () alert(ID + thisget(ID) + BookName + thisget(BookName)) )

Model identifiers - id cid and idAttribute

The cid or the client id is the auto-generated by backbone so that every model can be uniquely identified on the client

The id will be used to identify the model when the model data is actually being synced with server

var book2 = new Book()book2id = 3consolelog(book2id) output will be 3

We can also make use of Backbone lsquoIdAttributersquo to represent an ID for the model object Please watch next slide for an example

idAttribute

var Book = BackboneModelextend( defaults ID ldquo BookName ldquordquo idAttribute IDldquo initialize function () consolelog(Book has been intialized) constructor function (attributes options) consolelog(Books constructor had been called) BackboneModelapply(this arguments) )

Samplevar book3 = new Book( ID 43 )consolelog(book1id) output will be 43

Backbone provides library to validate the data before saving it

Validating the model

var Book = BackboneModelextend( defaults ID ldquo BookName ldquo idAttribute IDldquo initialize function () consolelog(Book has been initialized) thison(invalid function (model error) consolelog(Houston we have a problem + error) ) constructor function (attributes options) consolelog(Books constructor had been called) BackboneModelapply(this arguments) validate function (attr) if (attrID lt= 0) return Invalid value for ID supplied urlRoot httplocalhost51377apiBookslsquo)

var book4 = new Book( ID -4 )var result = book4isValid() false

var book5 = new Book() book5set(ID -1 validatetrue)

To validate data in a model

CRUD Operations ndash Create Read UpdateDelete

var book = new Book( BookName Backbone Book 43 )booksave( success function (model response options) consolelog(The model has been saved to the server) error function (model xhr options) consolelog(Something went wrong while saving the model) )

Saving the model

var book1 = new Book( ID 40 )

book1fetch( success function (bookResponse) consolelog(Found the book + bookResponseget(BookName)) )

Reading data

var book1 = new Book( ID 40 )

book1fetch( success function (bookResponse) consolelog(Found the book + bookResponseget(BookName)) bookResponseset(BookName bookResponseget(BookName) + _upd) bookResponsesave( success function (model respose options) consolelog(The model has been updated to the server) error function (model xhr options) consolelog(Something went wrong while updating the model) ) )

Updating data

Deleting data

var book2 = new Book( ID 40 )

book2destroy( success function (model respose options) consolelog(The model has deleted the server) error function (model xhr options) consolelog(Something went wrong while deleting the model) )

Override sync() function to change the manner in which Backbone persists models to the server You will be passed the type of request and the model in question By default makes a RESTful Ajax request to the modelrsquos url()

var BookEx = BackboneModelextend( defaults ID BookName idAttribute ID getCustomUrl function (method) switch (method) case read return httplocalhost51377apiBooks + thisid break case create return httplocalhost51377apiBooks break case update return httplocalhost51377apiBooks + thisid break case delete return httplocalhost51377apiBooks + thisid break sync function (method model options) options || (options = ) optionsurl = thisgetCustomUrl(methodtoLowerCase()) return Backbonesyncapply(this arguments) )

Sync function

var BooksCollection = BackboneCollectionextend( model Book )

Instantiating a collectionvar collection1 = new BooksCollection()var book3 = new Book( ID 3 BookName Book 3 ) collection1add(book3)

var book1 = new Book( ID 1 BookName Book 1 )var book2 = new Book( ID 2 BookName Book 2 ) var collection2 = new BooksCollection([book1 book2])

var book2_changed = new Book( ID 2 BookName Changed model ) collection2add(book2_changed merge true )

Collections

Some Backbone library for collectionshellip

var book0 = new Book( ID 0 BookName Book 0 )collection2add(book0 at0)

collection2remove(book0) to remove model from function

collection1reset() to empty the collection

collection2reset([book4 book5]) reset and add models to collection

consolelog(collection2length) prints 2

To fetch models from collectionvar bookRecieved = collection2at(3)

var index = collection2indexOf(bookRecieved)

var bookFetchedbyId = collection2get(2) fetch using model attributes

var BooksCollection = BackboneCollectionextend( model Book url httplocalhost51377apiBooks)

var collection4 = new BooksCollection() collection4fetch( success function (collection4 response) collection4each(function (item index all) itemset(BookName itemget(BookName) + _updated) itemsave() ) )

Saving Collection using REST service

Views

Creating a simple viewvar bookView= BackboneViewextend( initialize function() consolelog(sampleView has been created) )

var view1 = new bookView()

Associating model with a view

var book1 = new Book( ID 1 BookName Book 1 )var m_bookView = new bookView(model book1)

View for DOM elementvar view1 = new bookView( el $(sampleDiv) )

To create a DOM element dynamically with view

var sampleView2 = BackboneViewextend( tagname div id sampleDivlsquo )

var bookView = BackboneViewextend( tagname li model Book events click itemClicked itemClicked function () thisrender() render function () this$elhtml(ltligt + thismodelget(BookName) + ltligt) return this )

View listening to DOM events

var bookListView = BackboneViewextend( model BooksCollection initialize function() thislistenTo(thismodel add thismodelUpdated)

modelUpdated function() thisrender() )

View listening to Model changes

Removing a view from DOM

bookViewremove()

var myRouter = BackboneRouterextend( greeting null container null view1 null view2 null initialize function() thisgreeting = new GreetModel( Message Hello world ) thiscontainer = new ContainerView( el $(rAppContainer) model thisgreeting ) routes handleRoute1 view1 handleRoute1 view2 handleRoute2ldquo handleRoute1 function () if (thisview1 == null) thisview1 = new View1( model thisgreeting ) thiscontainermyChildView = thisview1 thiscontainerrender() )

Routers

To make Backbone listen to Routes

$(document)ready(function () router = new myRouter() Backbonehistorystart() )

To navigate to view within the applicationrouternavigate(view1)

httpsDemohtmlview1

httpsDemohtmlview2

Model identifiers - id cid and idAttribute

The cid or the client id is the auto-generated by backbone so that every model can be uniquely identified on the client

The id will be used to identify the model when the model data is actually being synced with server

var book2 = new Book()book2id = 3consolelog(book2id) output will be 3

We can also make use of Backbone lsquoIdAttributersquo to represent an ID for the model object Please watch next slide for an example

idAttribute

var Book = BackboneModelextend( defaults ID ldquo BookName ldquordquo idAttribute IDldquo initialize function () consolelog(Book has been intialized) constructor function (attributes options) consolelog(Books constructor had been called) BackboneModelapply(this arguments) )

Samplevar book3 = new Book( ID 43 )consolelog(book1id) output will be 43

Backbone provides library to validate the data before saving it

Validating the model

var Book = BackboneModelextend( defaults ID ldquo BookName ldquo idAttribute IDldquo initialize function () consolelog(Book has been initialized) thison(invalid function (model error) consolelog(Houston we have a problem + error) ) constructor function (attributes options) consolelog(Books constructor had been called) BackboneModelapply(this arguments) validate function (attr) if (attrID lt= 0) return Invalid value for ID supplied urlRoot httplocalhost51377apiBookslsquo)

var book4 = new Book( ID -4 )var result = book4isValid() false

var book5 = new Book() book5set(ID -1 validatetrue)

To validate data in a model

CRUD Operations ndash Create Read UpdateDelete

var book = new Book( BookName Backbone Book 43 )booksave( success function (model response options) consolelog(The model has been saved to the server) error function (model xhr options) consolelog(Something went wrong while saving the model) )

Saving the model

var book1 = new Book( ID 40 )

book1fetch( success function (bookResponse) consolelog(Found the book + bookResponseget(BookName)) )

Reading data

var book1 = new Book( ID 40 )

book1fetch( success function (bookResponse) consolelog(Found the book + bookResponseget(BookName)) bookResponseset(BookName bookResponseget(BookName) + _upd) bookResponsesave( success function (model respose options) consolelog(The model has been updated to the server) error function (model xhr options) consolelog(Something went wrong while updating the model) ) )

Updating data

Deleting data

var book2 = new Book( ID 40 )

book2destroy( success function (model respose options) consolelog(The model has deleted the server) error function (model xhr options) consolelog(Something went wrong while deleting the model) )

Override sync() function to change the manner in which Backbone persists models to the server You will be passed the type of request and the model in question By default makes a RESTful Ajax request to the modelrsquos url()

var BookEx = BackboneModelextend( defaults ID BookName idAttribute ID getCustomUrl function (method) switch (method) case read return httplocalhost51377apiBooks + thisid break case create return httplocalhost51377apiBooks break case update return httplocalhost51377apiBooks + thisid break case delete return httplocalhost51377apiBooks + thisid break sync function (method model options) options || (options = ) optionsurl = thisgetCustomUrl(methodtoLowerCase()) return Backbonesyncapply(this arguments) )

Sync function

var BooksCollection = BackboneCollectionextend( model Book )

Instantiating a collectionvar collection1 = new BooksCollection()var book3 = new Book( ID 3 BookName Book 3 ) collection1add(book3)

var book1 = new Book( ID 1 BookName Book 1 )var book2 = new Book( ID 2 BookName Book 2 ) var collection2 = new BooksCollection([book1 book2])

var book2_changed = new Book( ID 2 BookName Changed model ) collection2add(book2_changed merge true )

Collections

Some Backbone library for collectionshellip

var book0 = new Book( ID 0 BookName Book 0 )collection2add(book0 at0)

collection2remove(book0) to remove model from function

collection1reset() to empty the collection

collection2reset([book4 book5]) reset and add models to collection

consolelog(collection2length) prints 2

To fetch models from collectionvar bookRecieved = collection2at(3)

var index = collection2indexOf(bookRecieved)

var bookFetchedbyId = collection2get(2) fetch using model attributes

var BooksCollection = BackboneCollectionextend( model Book url httplocalhost51377apiBooks)

var collection4 = new BooksCollection() collection4fetch( success function (collection4 response) collection4each(function (item index all) itemset(BookName itemget(BookName) + _updated) itemsave() ) )

Saving Collection using REST service

Views

Creating a simple viewvar bookView= BackboneViewextend( initialize function() consolelog(sampleView has been created) )

var view1 = new bookView()

Associating model with a view

var book1 = new Book( ID 1 BookName Book 1 )var m_bookView = new bookView(model book1)

View for DOM elementvar view1 = new bookView( el $(sampleDiv) )

To create a DOM element dynamically with view

var sampleView2 = BackboneViewextend( tagname div id sampleDivlsquo )

var bookView = BackboneViewextend( tagname li model Book events click itemClicked itemClicked function () thisrender() render function () this$elhtml(ltligt + thismodelget(BookName) + ltligt) return this )

View listening to DOM events

var bookListView = BackboneViewextend( model BooksCollection initialize function() thislistenTo(thismodel add thismodelUpdated)

modelUpdated function() thisrender() )

View listening to Model changes

Removing a view from DOM

bookViewremove()

var myRouter = BackboneRouterextend( greeting null container null view1 null view2 null initialize function() thisgreeting = new GreetModel( Message Hello world ) thiscontainer = new ContainerView( el $(rAppContainer) model thisgreeting ) routes handleRoute1 view1 handleRoute1 view2 handleRoute2ldquo handleRoute1 function () if (thisview1 == null) thisview1 = new View1( model thisgreeting ) thiscontainermyChildView = thisview1 thiscontainerrender() )

Routers

To make Backbone listen to Routes

$(document)ready(function () router = new myRouter() Backbonehistorystart() )

To navigate to view within the applicationrouternavigate(view1)

httpsDemohtmlview1

httpsDemohtmlview2

idAttribute

var Book = BackboneModelextend( defaults ID ldquo BookName ldquordquo idAttribute IDldquo initialize function () consolelog(Book has been intialized) constructor function (attributes options) consolelog(Books constructor had been called) BackboneModelapply(this arguments) )

Samplevar book3 = new Book( ID 43 )consolelog(book1id) output will be 43

Backbone provides library to validate the data before saving it

Validating the model

var Book = BackboneModelextend( defaults ID ldquo BookName ldquo idAttribute IDldquo initialize function () consolelog(Book has been initialized) thison(invalid function (model error) consolelog(Houston we have a problem + error) ) constructor function (attributes options) consolelog(Books constructor had been called) BackboneModelapply(this arguments) validate function (attr) if (attrID lt= 0) return Invalid value for ID supplied urlRoot httplocalhost51377apiBookslsquo)

var book4 = new Book( ID -4 )var result = book4isValid() false

var book5 = new Book() book5set(ID -1 validatetrue)

To validate data in a model

CRUD Operations ndash Create Read UpdateDelete

var book = new Book( BookName Backbone Book 43 )booksave( success function (model response options) consolelog(The model has been saved to the server) error function (model xhr options) consolelog(Something went wrong while saving the model) )

Saving the model

var book1 = new Book( ID 40 )

book1fetch( success function (bookResponse) consolelog(Found the book + bookResponseget(BookName)) )

Reading data

var book1 = new Book( ID 40 )

book1fetch( success function (bookResponse) consolelog(Found the book + bookResponseget(BookName)) bookResponseset(BookName bookResponseget(BookName) + _upd) bookResponsesave( success function (model respose options) consolelog(The model has been updated to the server) error function (model xhr options) consolelog(Something went wrong while updating the model) ) )

Updating data

Deleting data

var book2 = new Book( ID 40 )

book2destroy( success function (model respose options) consolelog(The model has deleted the server) error function (model xhr options) consolelog(Something went wrong while deleting the model) )

Override sync() function to change the manner in which Backbone persists models to the server You will be passed the type of request and the model in question By default makes a RESTful Ajax request to the modelrsquos url()

var BookEx = BackboneModelextend( defaults ID BookName idAttribute ID getCustomUrl function (method) switch (method) case read return httplocalhost51377apiBooks + thisid break case create return httplocalhost51377apiBooks break case update return httplocalhost51377apiBooks + thisid break case delete return httplocalhost51377apiBooks + thisid break sync function (method model options) options || (options = ) optionsurl = thisgetCustomUrl(methodtoLowerCase()) return Backbonesyncapply(this arguments) )

Sync function

var BooksCollection = BackboneCollectionextend( model Book )

Instantiating a collectionvar collection1 = new BooksCollection()var book3 = new Book( ID 3 BookName Book 3 ) collection1add(book3)

var book1 = new Book( ID 1 BookName Book 1 )var book2 = new Book( ID 2 BookName Book 2 ) var collection2 = new BooksCollection([book1 book2])

var book2_changed = new Book( ID 2 BookName Changed model ) collection2add(book2_changed merge true )

Collections

Some Backbone library for collectionshellip

var book0 = new Book( ID 0 BookName Book 0 )collection2add(book0 at0)

collection2remove(book0) to remove model from function

collection1reset() to empty the collection

collection2reset([book4 book5]) reset and add models to collection

consolelog(collection2length) prints 2

To fetch models from collectionvar bookRecieved = collection2at(3)

var index = collection2indexOf(bookRecieved)

var bookFetchedbyId = collection2get(2) fetch using model attributes

var BooksCollection = BackboneCollectionextend( model Book url httplocalhost51377apiBooks)

var collection4 = new BooksCollection() collection4fetch( success function (collection4 response) collection4each(function (item index all) itemset(BookName itemget(BookName) + _updated) itemsave() ) )

Saving Collection using REST service

Views

Creating a simple viewvar bookView= BackboneViewextend( initialize function() consolelog(sampleView has been created) )

var view1 = new bookView()

Associating model with a view

var book1 = new Book( ID 1 BookName Book 1 )var m_bookView = new bookView(model book1)

View for DOM elementvar view1 = new bookView( el $(sampleDiv) )

To create a DOM element dynamically with view

var sampleView2 = BackboneViewextend( tagname div id sampleDivlsquo )

var bookView = BackboneViewextend( tagname li model Book events click itemClicked itemClicked function () thisrender() render function () this$elhtml(ltligt + thismodelget(BookName) + ltligt) return this )

View listening to DOM events

var bookListView = BackboneViewextend( model BooksCollection initialize function() thislistenTo(thismodel add thismodelUpdated)

modelUpdated function() thisrender() )

View listening to Model changes

Removing a view from DOM

bookViewremove()

var myRouter = BackboneRouterextend( greeting null container null view1 null view2 null initialize function() thisgreeting = new GreetModel( Message Hello world ) thiscontainer = new ContainerView( el $(rAppContainer) model thisgreeting ) routes handleRoute1 view1 handleRoute1 view2 handleRoute2ldquo handleRoute1 function () if (thisview1 == null) thisview1 = new View1( model thisgreeting ) thiscontainermyChildView = thisview1 thiscontainerrender() )

Routers

To make Backbone listen to Routes

$(document)ready(function () router = new myRouter() Backbonehistorystart() )

To navigate to view within the applicationrouternavigate(view1)

httpsDemohtmlview1

httpsDemohtmlview2

Backbone provides library to validate the data before saving it

Validating the model

var Book = BackboneModelextend( defaults ID ldquo BookName ldquo idAttribute IDldquo initialize function () consolelog(Book has been initialized) thison(invalid function (model error) consolelog(Houston we have a problem + error) ) constructor function (attributes options) consolelog(Books constructor had been called) BackboneModelapply(this arguments) validate function (attr) if (attrID lt= 0) return Invalid value for ID supplied urlRoot httplocalhost51377apiBookslsquo)

var book4 = new Book( ID -4 )var result = book4isValid() false

var book5 = new Book() book5set(ID -1 validatetrue)

To validate data in a model

CRUD Operations ndash Create Read UpdateDelete

var book = new Book( BookName Backbone Book 43 )booksave( success function (model response options) consolelog(The model has been saved to the server) error function (model xhr options) consolelog(Something went wrong while saving the model) )

Saving the model

var book1 = new Book( ID 40 )

book1fetch( success function (bookResponse) consolelog(Found the book + bookResponseget(BookName)) )

Reading data

var book1 = new Book( ID 40 )

book1fetch( success function (bookResponse) consolelog(Found the book + bookResponseget(BookName)) bookResponseset(BookName bookResponseget(BookName) + _upd) bookResponsesave( success function (model respose options) consolelog(The model has been updated to the server) error function (model xhr options) consolelog(Something went wrong while updating the model) ) )

Updating data

Deleting data

var book2 = new Book( ID 40 )

book2destroy( success function (model respose options) consolelog(The model has deleted the server) error function (model xhr options) consolelog(Something went wrong while deleting the model) )

Override sync() function to change the manner in which Backbone persists models to the server You will be passed the type of request and the model in question By default makes a RESTful Ajax request to the modelrsquos url()

var BookEx = BackboneModelextend( defaults ID BookName idAttribute ID getCustomUrl function (method) switch (method) case read return httplocalhost51377apiBooks + thisid break case create return httplocalhost51377apiBooks break case update return httplocalhost51377apiBooks + thisid break case delete return httplocalhost51377apiBooks + thisid break sync function (method model options) options || (options = ) optionsurl = thisgetCustomUrl(methodtoLowerCase()) return Backbonesyncapply(this arguments) )

Sync function

var BooksCollection = BackboneCollectionextend( model Book )

Instantiating a collectionvar collection1 = new BooksCollection()var book3 = new Book( ID 3 BookName Book 3 ) collection1add(book3)

var book1 = new Book( ID 1 BookName Book 1 )var book2 = new Book( ID 2 BookName Book 2 ) var collection2 = new BooksCollection([book1 book2])

var book2_changed = new Book( ID 2 BookName Changed model ) collection2add(book2_changed merge true )

Collections

Some Backbone library for collectionshellip

var book0 = new Book( ID 0 BookName Book 0 )collection2add(book0 at0)

collection2remove(book0) to remove model from function

collection1reset() to empty the collection

collection2reset([book4 book5]) reset and add models to collection

consolelog(collection2length) prints 2

To fetch models from collectionvar bookRecieved = collection2at(3)

var index = collection2indexOf(bookRecieved)

var bookFetchedbyId = collection2get(2) fetch using model attributes

var BooksCollection = BackboneCollectionextend( model Book url httplocalhost51377apiBooks)

var collection4 = new BooksCollection() collection4fetch( success function (collection4 response) collection4each(function (item index all) itemset(BookName itemget(BookName) + _updated) itemsave() ) )

Saving Collection using REST service

Views

Creating a simple viewvar bookView= BackboneViewextend( initialize function() consolelog(sampleView has been created) )

var view1 = new bookView()

Associating model with a view

var book1 = new Book( ID 1 BookName Book 1 )var m_bookView = new bookView(model book1)

View for DOM elementvar view1 = new bookView( el $(sampleDiv) )

To create a DOM element dynamically with view

var sampleView2 = BackboneViewextend( tagname div id sampleDivlsquo )

var bookView = BackboneViewextend( tagname li model Book events click itemClicked itemClicked function () thisrender() render function () this$elhtml(ltligt + thismodelget(BookName) + ltligt) return this )

View listening to DOM events

var bookListView = BackboneViewextend( model BooksCollection initialize function() thislistenTo(thismodel add thismodelUpdated)

modelUpdated function() thisrender() )

View listening to Model changes

Removing a view from DOM

bookViewremove()

var myRouter = BackboneRouterextend( greeting null container null view1 null view2 null initialize function() thisgreeting = new GreetModel( Message Hello world ) thiscontainer = new ContainerView( el $(rAppContainer) model thisgreeting ) routes handleRoute1 view1 handleRoute1 view2 handleRoute2ldquo handleRoute1 function () if (thisview1 == null) thisview1 = new View1( model thisgreeting ) thiscontainermyChildView = thisview1 thiscontainerrender() )

Routers

To make Backbone listen to Routes

$(document)ready(function () router = new myRouter() Backbonehistorystart() )

To navigate to view within the applicationrouternavigate(view1)

httpsDemohtmlview1

httpsDemohtmlview2

Validating the model

var Book = BackboneModelextend( defaults ID ldquo BookName ldquo idAttribute IDldquo initialize function () consolelog(Book has been initialized) thison(invalid function (model error) consolelog(Houston we have a problem + error) ) constructor function (attributes options) consolelog(Books constructor had been called) BackboneModelapply(this arguments) validate function (attr) if (attrID lt= 0) return Invalid value for ID supplied urlRoot httplocalhost51377apiBookslsquo)

var book4 = new Book( ID -4 )var result = book4isValid() false

var book5 = new Book() book5set(ID -1 validatetrue)

To validate data in a model

CRUD Operations ndash Create Read UpdateDelete

var book = new Book( BookName Backbone Book 43 )booksave( success function (model response options) consolelog(The model has been saved to the server) error function (model xhr options) consolelog(Something went wrong while saving the model) )

Saving the model

var book1 = new Book( ID 40 )

book1fetch( success function (bookResponse) consolelog(Found the book + bookResponseget(BookName)) )

Reading data

var book1 = new Book( ID 40 )

book1fetch( success function (bookResponse) consolelog(Found the book + bookResponseget(BookName)) bookResponseset(BookName bookResponseget(BookName) + _upd) bookResponsesave( success function (model respose options) consolelog(The model has been updated to the server) error function (model xhr options) consolelog(Something went wrong while updating the model) ) )

Updating data

Deleting data

var book2 = new Book( ID 40 )

book2destroy( success function (model respose options) consolelog(The model has deleted the server) error function (model xhr options) consolelog(Something went wrong while deleting the model) )

Override sync() function to change the manner in which Backbone persists models to the server You will be passed the type of request and the model in question By default makes a RESTful Ajax request to the modelrsquos url()

var BookEx = BackboneModelextend( defaults ID BookName idAttribute ID getCustomUrl function (method) switch (method) case read return httplocalhost51377apiBooks + thisid break case create return httplocalhost51377apiBooks break case update return httplocalhost51377apiBooks + thisid break case delete return httplocalhost51377apiBooks + thisid break sync function (method model options) options || (options = ) optionsurl = thisgetCustomUrl(methodtoLowerCase()) return Backbonesyncapply(this arguments) )

Sync function

var BooksCollection = BackboneCollectionextend( model Book )

Instantiating a collectionvar collection1 = new BooksCollection()var book3 = new Book( ID 3 BookName Book 3 ) collection1add(book3)

var book1 = new Book( ID 1 BookName Book 1 )var book2 = new Book( ID 2 BookName Book 2 ) var collection2 = new BooksCollection([book1 book2])

var book2_changed = new Book( ID 2 BookName Changed model ) collection2add(book2_changed merge true )

Collections

Some Backbone library for collectionshellip

var book0 = new Book( ID 0 BookName Book 0 )collection2add(book0 at0)

collection2remove(book0) to remove model from function

collection1reset() to empty the collection

collection2reset([book4 book5]) reset and add models to collection

consolelog(collection2length) prints 2

To fetch models from collectionvar bookRecieved = collection2at(3)

var index = collection2indexOf(bookRecieved)

var bookFetchedbyId = collection2get(2) fetch using model attributes

var BooksCollection = BackboneCollectionextend( model Book url httplocalhost51377apiBooks)

var collection4 = new BooksCollection() collection4fetch( success function (collection4 response) collection4each(function (item index all) itemset(BookName itemget(BookName) + _updated) itemsave() ) )

Saving Collection using REST service

Views

Creating a simple viewvar bookView= BackboneViewextend( initialize function() consolelog(sampleView has been created) )

var view1 = new bookView()

Associating model with a view

var book1 = new Book( ID 1 BookName Book 1 )var m_bookView = new bookView(model book1)

View for DOM elementvar view1 = new bookView( el $(sampleDiv) )

To create a DOM element dynamically with view

var sampleView2 = BackboneViewextend( tagname div id sampleDivlsquo )

var bookView = BackboneViewextend( tagname li model Book events click itemClicked itemClicked function () thisrender() render function () this$elhtml(ltligt + thismodelget(BookName) + ltligt) return this )

View listening to DOM events

var bookListView = BackboneViewextend( model BooksCollection initialize function() thislistenTo(thismodel add thismodelUpdated)

modelUpdated function() thisrender() )

View listening to Model changes

Removing a view from DOM

bookViewremove()

var myRouter = BackboneRouterextend( greeting null container null view1 null view2 null initialize function() thisgreeting = new GreetModel( Message Hello world ) thiscontainer = new ContainerView( el $(rAppContainer) model thisgreeting ) routes handleRoute1 view1 handleRoute1 view2 handleRoute2ldquo handleRoute1 function () if (thisview1 == null) thisview1 = new View1( model thisgreeting ) thiscontainermyChildView = thisview1 thiscontainerrender() )

Routers

To make Backbone listen to Routes

$(document)ready(function () router = new myRouter() Backbonehistorystart() )

To navigate to view within the applicationrouternavigate(view1)

httpsDemohtmlview1

httpsDemohtmlview2

var book4 = new Book( ID -4 )var result = book4isValid() false

var book5 = new Book() book5set(ID -1 validatetrue)

To validate data in a model

CRUD Operations ndash Create Read UpdateDelete

var book = new Book( BookName Backbone Book 43 )booksave( success function (model response options) consolelog(The model has been saved to the server) error function (model xhr options) consolelog(Something went wrong while saving the model) )

Saving the model

var book1 = new Book( ID 40 )

book1fetch( success function (bookResponse) consolelog(Found the book + bookResponseget(BookName)) )

Reading data

var book1 = new Book( ID 40 )

book1fetch( success function (bookResponse) consolelog(Found the book + bookResponseget(BookName)) bookResponseset(BookName bookResponseget(BookName) + _upd) bookResponsesave( success function (model respose options) consolelog(The model has been updated to the server) error function (model xhr options) consolelog(Something went wrong while updating the model) ) )

Updating data

Deleting data

var book2 = new Book( ID 40 )

book2destroy( success function (model respose options) consolelog(The model has deleted the server) error function (model xhr options) consolelog(Something went wrong while deleting the model) )

Override sync() function to change the manner in which Backbone persists models to the server You will be passed the type of request and the model in question By default makes a RESTful Ajax request to the modelrsquos url()

var BookEx = BackboneModelextend( defaults ID BookName idAttribute ID getCustomUrl function (method) switch (method) case read return httplocalhost51377apiBooks + thisid break case create return httplocalhost51377apiBooks break case update return httplocalhost51377apiBooks + thisid break case delete return httplocalhost51377apiBooks + thisid break sync function (method model options) options || (options = ) optionsurl = thisgetCustomUrl(methodtoLowerCase()) return Backbonesyncapply(this arguments) )

Sync function

var BooksCollection = BackboneCollectionextend( model Book )

Instantiating a collectionvar collection1 = new BooksCollection()var book3 = new Book( ID 3 BookName Book 3 ) collection1add(book3)

var book1 = new Book( ID 1 BookName Book 1 )var book2 = new Book( ID 2 BookName Book 2 ) var collection2 = new BooksCollection([book1 book2])

var book2_changed = new Book( ID 2 BookName Changed model ) collection2add(book2_changed merge true )

Collections

Some Backbone library for collectionshellip

var book0 = new Book( ID 0 BookName Book 0 )collection2add(book0 at0)

collection2remove(book0) to remove model from function

collection1reset() to empty the collection

collection2reset([book4 book5]) reset and add models to collection

consolelog(collection2length) prints 2

To fetch models from collectionvar bookRecieved = collection2at(3)

var index = collection2indexOf(bookRecieved)

var bookFetchedbyId = collection2get(2) fetch using model attributes

var BooksCollection = BackboneCollectionextend( model Book url httplocalhost51377apiBooks)

var collection4 = new BooksCollection() collection4fetch( success function (collection4 response) collection4each(function (item index all) itemset(BookName itemget(BookName) + _updated) itemsave() ) )

Saving Collection using REST service

Views

Creating a simple viewvar bookView= BackboneViewextend( initialize function() consolelog(sampleView has been created) )

var view1 = new bookView()

Associating model with a view

var book1 = new Book( ID 1 BookName Book 1 )var m_bookView = new bookView(model book1)

View for DOM elementvar view1 = new bookView( el $(sampleDiv) )

To create a DOM element dynamically with view

var sampleView2 = BackboneViewextend( tagname div id sampleDivlsquo )

var bookView = BackboneViewextend( tagname li model Book events click itemClicked itemClicked function () thisrender() render function () this$elhtml(ltligt + thismodelget(BookName) + ltligt) return this )

View listening to DOM events

var bookListView = BackboneViewextend( model BooksCollection initialize function() thislistenTo(thismodel add thismodelUpdated)

modelUpdated function() thisrender() )

View listening to Model changes

Removing a view from DOM

bookViewremove()

var myRouter = BackboneRouterextend( greeting null container null view1 null view2 null initialize function() thisgreeting = new GreetModel( Message Hello world ) thiscontainer = new ContainerView( el $(rAppContainer) model thisgreeting ) routes handleRoute1 view1 handleRoute1 view2 handleRoute2ldquo handleRoute1 function () if (thisview1 == null) thisview1 = new View1( model thisgreeting ) thiscontainermyChildView = thisview1 thiscontainerrender() )

Routers

To make Backbone listen to Routes

$(document)ready(function () router = new myRouter() Backbonehistorystart() )

To navigate to view within the applicationrouternavigate(view1)

httpsDemohtmlview1

httpsDemohtmlview2

CRUD Operations ndash Create Read UpdateDelete

var book = new Book( BookName Backbone Book 43 )booksave( success function (model response options) consolelog(The model has been saved to the server) error function (model xhr options) consolelog(Something went wrong while saving the model) )

Saving the model

var book1 = new Book( ID 40 )

book1fetch( success function (bookResponse) consolelog(Found the book + bookResponseget(BookName)) )

Reading data

var book1 = new Book( ID 40 )

book1fetch( success function (bookResponse) consolelog(Found the book + bookResponseget(BookName)) bookResponseset(BookName bookResponseget(BookName) + _upd) bookResponsesave( success function (model respose options) consolelog(The model has been updated to the server) error function (model xhr options) consolelog(Something went wrong while updating the model) ) )

Updating data

Deleting data

var book2 = new Book( ID 40 )

book2destroy( success function (model respose options) consolelog(The model has deleted the server) error function (model xhr options) consolelog(Something went wrong while deleting the model) )

Override sync() function to change the manner in which Backbone persists models to the server You will be passed the type of request and the model in question By default makes a RESTful Ajax request to the modelrsquos url()

var BookEx = BackboneModelextend( defaults ID BookName idAttribute ID getCustomUrl function (method) switch (method) case read return httplocalhost51377apiBooks + thisid break case create return httplocalhost51377apiBooks break case update return httplocalhost51377apiBooks + thisid break case delete return httplocalhost51377apiBooks + thisid break sync function (method model options) options || (options = ) optionsurl = thisgetCustomUrl(methodtoLowerCase()) return Backbonesyncapply(this arguments) )

Sync function

var BooksCollection = BackboneCollectionextend( model Book )

Instantiating a collectionvar collection1 = new BooksCollection()var book3 = new Book( ID 3 BookName Book 3 ) collection1add(book3)

var book1 = new Book( ID 1 BookName Book 1 )var book2 = new Book( ID 2 BookName Book 2 ) var collection2 = new BooksCollection([book1 book2])

var book2_changed = new Book( ID 2 BookName Changed model ) collection2add(book2_changed merge true )

Collections

Some Backbone library for collectionshellip

var book0 = new Book( ID 0 BookName Book 0 )collection2add(book0 at0)

collection2remove(book0) to remove model from function

collection1reset() to empty the collection

collection2reset([book4 book5]) reset and add models to collection

consolelog(collection2length) prints 2

To fetch models from collectionvar bookRecieved = collection2at(3)

var index = collection2indexOf(bookRecieved)

var bookFetchedbyId = collection2get(2) fetch using model attributes

var BooksCollection = BackboneCollectionextend( model Book url httplocalhost51377apiBooks)

var collection4 = new BooksCollection() collection4fetch( success function (collection4 response) collection4each(function (item index all) itemset(BookName itemget(BookName) + _updated) itemsave() ) )

Saving Collection using REST service

Views

Creating a simple viewvar bookView= BackboneViewextend( initialize function() consolelog(sampleView has been created) )

var view1 = new bookView()

Associating model with a view

var book1 = new Book( ID 1 BookName Book 1 )var m_bookView = new bookView(model book1)

View for DOM elementvar view1 = new bookView( el $(sampleDiv) )

To create a DOM element dynamically with view

var sampleView2 = BackboneViewextend( tagname div id sampleDivlsquo )

var bookView = BackboneViewextend( tagname li model Book events click itemClicked itemClicked function () thisrender() render function () this$elhtml(ltligt + thismodelget(BookName) + ltligt) return this )

View listening to DOM events

var bookListView = BackboneViewextend( model BooksCollection initialize function() thislistenTo(thismodel add thismodelUpdated)

modelUpdated function() thisrender() )

View listening to Model changes

Removing a view from DOM

bookViewremove()

var myRouter = BackboneRouterextend( greeting null container null view1 null view2 null initialize function() thisgreeting = new GreetModel( Message Hello world ) thiscontainer = new ContainerView( el $(rAppContainer) model thisgreeting ) routes handleRoute1 view1 handleRoute1 view2 handleRoute2ldquo handleRoute1 function () if (thisview1 == null) thisview1 = new View1( model thisgreeting ) thiscontainermyChildView = thisview1 thiscontainerrender() )

Routers

To make Backbone listen to Routes

$(document)ready(function () router = new myRouter() Backbonehistorystart() )

To navigate to view within the applicationrouternavigate(view1)

httpsDemohtmlview1

httpsDemohtmlview2

var book = new Book( BookName Backbone Book 43 )booksave( success function (model response options) consolelog(The model has been saved to the server) error function (model xhr options) consolelog(Something went wrong while saving the model) )

Saving the model

var book1 = new Book( ID 40 )

book1fetch( success function (bookResponse) consolelog(Found the book + bookResponseget(BookName)) )

Reading data

var book1 = new Book( ID 40 )

book1fetch( success function (bookResponse) consolelog(Found the book + bookResponseget(BookName)) bookResponseset(BookName bookResponseget(BookName) + _upd) bookResponsesave( success function (model respose options) consolelog(The model has been updated to the server) error function (model xhr options) consolelog(Something went wrong while updating the model) ) )

Updating data

Deleting data

var book2 = new Book( ID 40 )

book2destroy( success function (model respose options) consolelog(The model has deleted the server) error function (model xhr options) consolelog(Something went wrong while deleting the model) )

Override sync() function to change the manner in which Backbone persists models to the server You will be passed the type of request and the model in question By default makes a RESTful Ajax request to the modelrsquos url()

var BookEx = BackboneModelextend( defaults ID BookName idAttribute ID getCustomUrl function (method) switch (method) case read return httplocalhost51377apiBooks + thisid break case create return httplocalhost51377apiBooks break case update return httplocalhost51377apiBooks + thisid break case delete return httplocalhost51377apiBooks + thisid break sync function (method model options) options || (options = ) optionsurl = thisgetCustomUrl(methodtoLowerCase()) return Backbonesyncapply(this arguments) )

Sync function

var BooksCollection = BackboneCollectionextend( model Book )

Instantiating a collectionvar collection1 = new BooksCollection()var book3 = new Book( ID 3 BookName Book 3 ) collection1add(book3)

var book1 = new Book( ID 1 BookName Book 1 )var book2 = new Book( ID 2 BookName Book 2 ) var collection2 = new BooksCollection([book1 book2])

var book2_changed = new Book( ID 2 BookName Changed model ) collection2add(book2_changed merge true )

Collections

Some Backbone library for collectionshellip

var book0 = new Book( ID 0 BookName Book 0 )collection2add(book0 at0)

collection2remove(book0) to remove model from function

collection1reset() to empty the collection

collection2reset([book4 book5]) reset and add models to collection

consolelog(collection2length) prints 2

To fetch models from collectionvar bookRecieved = collection2at(3)

var index = collection2indexOf(bookRecieved)

var bookFetchedbyId = collection2get(2) fetch using model attributes

var BooksCollection = BackboneCollectionextend( model Book url httplocalhost51377apiBooks)

var collection4 = new BooksCollection() collection4fetch( success function (collection4 response) collection4each(function (item index all) itemset(BookName itemget(BookName) + _updated) itemsave() ) )

Saving Collection using REST service

Views

Creating a simple viewvar bookView= BackboneViewextend( initialize function() consolelog(sampleView has been created) )

var view1 = new bookView()

Associating model with a view

var book1 = new Book( ID 1 BookName Book 1 )var m_bookView = new bookView(model book1)

View for DOM elementvar view1 = new bookView( el $(sampleDiv) )

To create a DOM element dynamically with view

var sampleView2 = BackboneViewextend( tagname div id sampleDivlsquo )

var bookView = BackboneViewextend( tagname li model Book events click itemClicked itemClicked function () thisrender() render function () this$elhtml(ltligt + thismodelget(BookName) + ltligt) return this )

View listening to DOM events

var bookListView = BackboneViewextend( model BooksCollection initialize function() thislistenTo(thismodel add thismodelUpdated)

modelUpdated function() thisrender() )

View listening to Model changes

Removing a view from DOM

bookViewremove()

var myRouter = BackboneRouterextend( greeting null container null view1 null view2 null initialize function() thisgreeting = new GreetModel( Message Hello world ) thiscontainer = new ContainerView( el $(rAppContainer) model thisgreeting ) routes handleRoute1 view1 handleRoute1 view2 handleRoute2ldquo handleRoute1 function () if (thisview1 == null) thisview1 = new View1( model thisgreeting ) thiscontainermyChildView = thisview1 thiscontainerrender() )

Routers

To make Backbone listen to Routes

$(document)ready(function () router = new myRouter() Backbonehistorystart() )

To navigate to view within the applicationrouternavigate(view1)

httpsDemohtmlview1

httpsDemohtmlview2

var book1 = new Book( ID 40 )

book1fetch( success function (bookResponse) consolelog(Found the book + bookResponseget(BookName)) )

Reading data

var book1 = new Book( ID 40 )

book1fetch( success function (bookResponse) consolelog(Found the book + bookResponseget(BookName)) bookResponseset(BookName bookResponseget(BookName) + _upd) bookResponsesave( success function (model respose options) consolelog(The model has been updated to the server) error function (model xhr options) consolelog(Something went wrong while updating the model) ) )

Updating data

Deleting data

var book2 = new Book( ID 40 )

book2destroy( success function (model respose options) consolelog(The model has deleted the server) error function (model xhr options) consolelog(Something went wrong while deleting the model) )

Override sync() function to change the manner in which Backbone persists models to the server You will be passed the type of request and the model in question By default makes a RESTful Ajax request to the modelrsquos url()

var BookEx = BackboneModelextend( defaults ID BookName idAttribute ID getCustomUrl function (method) switch (method) case read return httplocalhost51377apiBooks + thisid break case create return httplocalhost51377apiBooks break case update return httplocalhost51377apiBooks + thisid break case delete return httplocalhost51377apiBooks + thisid break sync function (method model options) options || (options = ) optionsurl = thisgetCustomUrl(methodtoLowerCase()) return Backbonesyncapply(this arguments) )

Sync function

var BooksCollection = BackboneCollectionextend( model Book )

Instantiating a collectionvar collection1 = new BooksCollection()var book3 = new Book( ID 3 BookName Book 3 ) collection1add(book3)

var book1 = new Book( ID 1 BookName Book 1 )var book2 = new Book( ID 2 BookName Book 2 ) var collection2 = new BooksCollection([book1 book2])

var book2_changed = new Book( ID 2 BookName Changed model ) collection2add(book2_changed merge true )

Collections

Some Backbone library for collectionshellip

var book0 = new Book( ID 0 BookName Book 0 )collection2add(book0 at0)

collection2remove(book0) to remove model from function

collection1reset() to empty the collection

collection2reset([book4 book5]) reset and add models to collection

consolelog(collection2length) prints 2

To fetch models from collectionvar bookRecieved = collection2at(3)

var index = collection2indexOf(bookRecieved)

var bookFetchedbyId = collection2get(2) fetch using model attributes

var BooksCollection = BackboneCollectionextend( model Book url httplocalhost51377apiBooks)

var collection4 = new BooksCollection() collection4fetch( success function (collection4 response) collection4each(function (item index all) itemset(BookName itemget(BookName) + _updated) itemsave() ) )

Saving Collection using REST service

Views

Creating a simple viewvar bookView= BackboneViewextend( initialize function() consolelog(sampleView has been created) )

var view1 = new bookView()

Associating model with a view

var book1 = new Book( ID 1 BookName Book 1 )var m_bookView = new bookView(model book1)

View for DOM elementvar view1 = new bookView( el $(sampleDiv) )

To create a DOM element dynamically with view

var sampleView2 = BackboneViewextend( tagname div id sampleDivlsquo )

var bookView = BackboneViewextend( tagname li model Book events click itemClicked itemClicked function () thisrender() render function () this$elhtml(ltligt + thismodelget(BookName) + ltligt) return this )

View listening to DOM events

var bookListView = BackboneViewextend( model BooksCollection initialize function() thislistenTo(thismodel add thismodelUpdated)

modelUpdated function() thisrender() )

View listening to Model changes

Removing a view from DOM

bookViewremove()

var myRouter = BackboneRouterextend( greeting null container null view1 null view2 null initialize function() thisgreeting = new GreetModel( Message Hello world ) thiscontainer = new ContainerView( el $(rAppContainer) model thisgreeting ) routes handleRoute1 view1 handleRoute1 view2 handleRoute2ldquo handleRoute1 function () if (thisview1 == null) thisview1 = new View1( model thisgreeting ) thiscontainermyChildView = thisview1 thiscontainerrender() )

Routers

To make Backbone listen to Routes

$(document)ready(function () router = new myRouter() Backbonehistorystart() )

To navigate to view within the applicationrouternavigate(view1)

httpsDemohtmlview1

httpsDemohtmlview2

var book1 = new Book( ID 40 )

book1fetch( success function (bookResponse) consolelog(Found the book + bookResponseget(BookName)) bookResponseset(BookName bookResponseget(BookName) + _upd) bookResponsesave( success function (model respose options) consolelog(The model has been updated to the server) error function (model xhr options) consolelog(Something went wrong while updating the model) ) )

Updating data

Deleting data

var book2 = new Book( ID 40 )

book2destroy( success function (model respose options) consolelog(The model has deleted the server) error function (model xhr options) consolelog(Something went wrong while deleting the model) )

Override sync() function to change the manner in which Backbone persists models to the server You will be passed the type of request and the model in question By default makes a RESTful Ajax request to the modelrsquos url()

var BookEx = BackboneModelextend( defaults ID BookName idAttribute ID getCustomUrl function (method) switch (method) case read return httplocalhost51377apiBooks + thisid break case create return httplocalhost51377apiBooks break case update return httplocalhost51377apiBooks + thisid break case delete return httplocalhost51377apiBooks + thisid break sync function (method model options) options || (options = ) optionsurl = thisgetCustomUrl(methodtoLowerCase()) return Backbonesyncapply(this arguments) )

Sync function

var BooksCollection = BackboneCollectionextend( model Book )

Instantiating a collectionvar collection1 = new BooksCollection()var book3 = new Book( ID 3 BookName Book 3 ) collection1add(book3)

var book1 = new Book( ID 1 BookName Book 1 )var book2 = new Book( ID 2 BookName Book 2 ) var collection2 = new BooksCollection([book1 book2])

var book2_changed = new Book( ID 2 BookName Changed model ) collection2add(book2_changed merge true )

Collections

Some Backbone library for collectionshellip

var book0 = new Book( ID 0 BookName Book 0 )collection2add(book0 at0)

collection2remove(book0) to remove model from function

collection1reset() to empty the collection

collection2reset([book4 book5]) reset and add models to collection

consolelog(collection2length) prints 2

To fetch models from collectionvar bookRecieved = collection2at(3)

var index = collection2indexOf(bookRecieved)

var bookFetchedbyId = collection2get(2) fetch using model attributes

var BooksCollection = BackboneCollectionextend( model Book url httplocalhost51377apiBooks)

var collection4 = new BooksCollection() collection4fetch( success function (collection4 response) collection4each(function (item index all) itemset(BookName itemget(BookName) + _updated) itemsave() ) )

Saving Collection using REST service

Views

Creating a simple viewvar bookView= BackboneViewextend( initialize function() consolelog(sampleView has been created) )

var view1 = new bookView()

Associating model with a view

var book1 = new Book( ID 1 BookName Book 1 )var m_bookView = new bookView(model book1)

View for DOM elementvar view1 = new bookView( el $(sampleDiv) )

To create a DOM element dynamically with view

var sampleView2 = BackboneViewextend( tagname div id sampleDivlsquo )

var bookView = BackboneViewextend( tagname li model Book events click itemClicked itemClicked function () thisrender() render function () this$elhtml(ltligt + thismodelget(BookName) + ltligt) return this )

View listening to DOM events

var bookListView = BackboneViewextend( model BooksCollection initialize function() thislistenTo(thismodel add thismodelUpdated)

modelUpdated function() thisrender() )

View listening to Model changes

Removing a view from DOM

bookViewremove()

var myRouter = BackboneRouterextend( greeting null container null view1 null view2 null initialize function() thisgreeting = new GreetModel( Message Hello world ) thiscontainer = new ContainerView( el $(rAppContainer) model thisgreeting ) routes handleRoute1 view1 handleRoute1 view2 handleRoute2ldquo handleRoute1 function () if (thisview1 == null) thisview1 = new View1( model thisgreeting ) thiscontainermyChildView = thisview1 thiscontainerrender() )

Routers

To make Backbone listen to Routes

$(document)ready(function () router = new myRouter() Backbonehistorystart() )

To navigate to view within the applicationrouternavigate(view1)

httpsDemohtmlview1

httpsDemohtmlview2

Deleting data

var book2 = new Book( ID 40 )

book2destroy( success function (model respose options) consolelog(The model has deleted the server) error function (model xhr options) consolelog(Something went wrong while deleting the model) )

Override sync() function to change the manner in which Backbone persists models to the server You will be passed the type of request and the model in question By default makes a RESTful Ajax request to the modelrsquos url()

var BookEx = BackboneModelextend( defaults ID BookName idAttribute ID getCustomUrl function (method) switch (method) case read return httplocalhost51377apiBooks + thisid break case create return httplocalhost51377apiBooks break case update return httplocalhost51377apiBooks + thisid break case delete return httplocalhost51377apiBooks + thisid break sync function (method model options) options || (options = ) optionsurl = thisgetCustomUrl(methodtoLowerCase()) return Backbonesyncapply(this arguments) )

Sync function

var BooksCollection = BackboneCollectionextend( model Book )

Instantiating a collectionvar collection1 = new BooksCollection()var book3 = new Book( ID 3 BookName Book 3 ) collection1add(book3)

var book1 = new Book( ID 1 BookName Book 1 )var book2 = new Book( ID 2 BookName Book 2 ) var collection2 = new BooksCollection([book1 book2])

var book2_changed = new Book( ID 2 BookName Changed model ) collection2add(book2_changed merge true )

Collections

Some Backbone library for collectionshellip

var book0 = new Book( ID 0 BookName Book 0 )collection2add(book0 at0)

collection2remove(book0) to remove model from function

collection1reset() to empty the collection

collection2reset([book4 book5]) reset and add models to collection

consolelog(collection2length) prints 2

To fetch models from collectionvar bookRecieved = collection2at(3)

var index = collection2indexOf(bookRecieved)

var bookFetchedbyId = collection2get(2) fetch using model attributes

var BooksCollection = BackboneCollectionextend( model Book url httplocalhost51377apiBooks)

var collection4 = new BooksCollection() collection4fetch( success function (collection4 response) collection4each(function (item index all) itemset(BookName itemget(BookName) + _updated) itemsave() ) )

Saving Collection using REST service

Views

Creating a simple viewvar bookView= BackboneViewextend( initialize function() consolelog(sampleView has been created) )

var view1 = new bookView()

Associating model with a view

var book1 = new Book( ID 1 BookName Book 1 )var m_bookView = new bookView(model book1)

View for DOM elementvar view1 = new bookView( el $(sampleDiv) )

To create a DOM element dynamically with view

var sampleView2 = BackboneViewextend( tagname div id sampleDivlsquo )

var bookView = BackboneViewextend( tagname li model Book events click itemClicked itemClicked function () thisrender() render function () this$elhtml(ltligt + thismodelget(BookName) + ltligt) return this )

View listening to DOM events

var bookListView = BackboneViewextend( model BooksCollection initialize function() thislistenTo(thismodel add thismodelUpdated)

modelUpdated function() thisrender() )

View listening to Model changes

Removing a view from DOM

bookViewremove()

var myRouter = BackboneRouterextend( greeting null container null view1 null view2 null initialize function() thisgreeting = new GreetModel( Message Hello world ) thiscontainer = new ContainerView( el $(rAppContainer) model thisgreeting ) routes handleRoute1 view1 handleRoute1 view2 handleRoute2ldquo handleRoute1 function () if (thisview1 == null) thisview1 = new View1( model thisgreeting ) thiscontainermyChildView = thisview1 thiscontainerrender() )

Routers

To make Backbone listen to Routes

$(document)ready(function () router = new myRouter() Backbonehistorystart() )

To navigate to view within the applicationrouternavigate(view1)

httpsDemohtmlview1

httpsDemohtmlview2

Override sync() function to change the manner in which Backbone persists models to the server You will be passed the type of request and the model in question By default makes a RESTful Ajax request to the modelrsquos url()

var BookEx = BackboneModelextend( defaults ID BookName idAttribute ID getCustomUrl function (method) switch (method) case read return httplocalhost51377apiBooks + thisid break case create return httplocalhost51377apiBooks break case update return httplocalhost51377apiBooks + thisid break case delete return httplocalhost51377apiBooks + thisid break sync function (method model options) options || (options = ) optionsurl = thisgetCustomUrl(methodtoLowerCase()) return Backbonesyncapply(this arguments) )

Sync function

var BooksCollection = BackboneCollectionextend( model Book )

Instantiating a collectionvar collection1 = new BooksCollection()var book3 = new Book( ID 3 BookName Book 3 ) collection1add(book3)

var book1 = new Book( ID 1 BookName Book 1 )var book2 = new Book( ID 2 BookName Book 2 ) var collection2 = new BooksCollection([book1 book2])

var book2_changed = new Book( ID 2 BookName Changed model ) collection2add(book2_changed merge true )

Collections

Some Backbone library for collectionshellip

var book0 = new Book( ID 0 BookName Book 0 )collection2add(book0 at0)

collection2remove(book0) to remove model from function

collection1reset() to empty the collection

collection2reset([book4 book5]) reset and add models to collection

consolelog(collection2length) prints 2

To fetch models from collectionvar bookRecieved = collection2at(3)

var index = collection2indexOf(bookRecieved)

var bookFetchedbyId = collection2get(2) fetch using model attributes

var BooksCollection = BackboneCollectionextend( model Book url httplocalhost51377apiBooks)

var collection4 = new BooksCollection() collection4fetch( success function (collection4 response) collection4each(function (item index all) itemset(BookName itemget(BookName) + _updated) itemsave() ) )

Saving Collection using REST service

Views

Creating a simple viewvar bookView= BackboneViewextend( initialize function() consolelog(sampleView has been created) )

var view1 = new bookView()

Associating model with a view

var book1 = new Book( ID 1 BookName Book 1 )var m_bookView = new bookView(model book1)

View for DOM elementvar view1 = new bookView( el $(sampleDiv) )

To create a DOM element dynamically with view

var sampleView2 = BackboneViewextend( tagname div id sampleDivlsquo )

var bookView = BackboneViewextend( tagname li model Book events click itemClicked itemClicked function () thisrender() render function () this$elhtml(ltligt + thismodelget(BookName) + ltligt) return this )

View listening to DOM events

var bookListView = BackboneViewextend( model BooksCollection initialize function() thislistenTo(thismodel add thismodelUpdated)

modelUpdated function() thisrender() )

View listening to Model changes

Removing a view from DOM

bookViewremove()

var myRouter = BackboneRouterextend( greeting null container null view1 null view2 null initialize function() thisgreeting = new GreetModel( Message Hello world ) thiscontainer = new ContainerView( el $(rAppContainer) model thisgreeting ) routes handleRoute1 view1 handleRoute1 view2 handleRoute2ldquo handleRoute1 function () if (thisview1 == null) thisview1 = new View1( model thisgreeting ) thiscontainermyChildView = thisview1 thiscontainerrender() )

Routers

To make Backbone listen to Routes

$(document)ready(function () router = new myRouter() Backbonehistorystart() )

To navigate to view within the applicationrouternavigate(view1)

httpsDemohtmlview1

httpsDemohtmlview2

var BookEx = BackboneModelextend( defaults ID BookName idAttribute ID getCustomUrl function (method) switch (method) case read return httplocalhost51377apiBooks + thisid break case create return httplocalhost51377apiBooks break case update return httplocalhost51377apiBooks + thisid break case delete return httplocalhost51377apiBooks + thisid break sync function (method model options) options || (options = ) optionsurl = thisgetCustomUrl(methodtoLowerCase()) return Backbonesyncapply(this arguments) )

Sync function

var BooksCollection = BackboneCollectionextend( model Book )

Instantiating a collectionvar collection1 = new BooksCollection()var book3 = new Book( ID 3 BookName Book 3 ) collection1add(book3)

var book1 = new Book( ID 1 BookName Book 1 )var book2 = new Book( ID 2 BookName Book 2 ) var collection2 = new BooksCollection([book1 book2])

var book2_changed = new Book( ID 2 BookName Changed model ) collection2add(book2_changed merge true )

Collections

Some Backbone library for collectionshellip

var book0 = new Book( ID 0 BookName Book 0 )collection2add(book0 at0)

collection2remove(book0) to remove model from function

collection1reset() to empty the collection

collection2reset([book4 book5]) reset and add models to collection

consolelog(collection2length) prints 2

To fetch models from collectionvar bookRecieved = collection2at(3)

var index = collection2indexOf(bookRecieved)

var bookFetchedbyId = collection2get(2) fetch using model attributes

var BooksCollection = BackboneCollectionextend( model Book url httplocalhost51377apiBooks)

var collection4 = new BooksCollection() collection4fetch( success function (collection4 response) collection4each(function (item index all) itemset(BookName itemget(BookName) + _updated) itemsave() ) )

Saving Collection using REST service

Views

Creating a simple viewvar bookView= BackboneViewextend( initialize function() consolelog(sampleView has been created) )

var view1 = new bookView()

Associating model with a view

var book1 = new Book( ID 1 BookName Book 1 )var m_bookView = new bookView(model book1)

View for DOM elementvar view1 = new bookView( el $(sampleDiv) )

To create a DOM element dynamically with view

var sampleView2 = BackboneViewextend( tagname div id sampleDivlsquo )

var bookView = BackboneViewextend( tagname li model Book events click itemClicked itemClicked function () thisrender() render function () this$elhtml(ltligt + thismodelget(BookName) + ltligt) return this )

View listening to DOM events

var bookListView = BackboneViewextend( model BooksCollection initialize function() thislistenTo(thismodel add thismodelUpdated)

modelUpdated function() thisrender() )

View listening to Model changes

Removing a view from DOM

bookViewremove()

var myRouter = BackboneRouterextend( greeting null container null view1 null view2 null initialize function() thisgreeting = new GreetModel( Message Hello world ) thiscontainer = new ContainerView( el $(rAppContainer) model thisgreeting ) routes handleRoute1 view1 handleRoute1 view2 handleRoute2ldquo handleRoute1 function () if (thisview1 == null) thisview1 = new View1( model thisgreeting ) thiscontainermyChildView = thisview1 thiscontainerrender() )

Routers

To make Backbone listen to Routes

$(document)ready(function () router = new myRouter() Backbonehistorystart() )

To navigate to view within the applicationrouternavigate(view1)

httpsDemohtmlview1

httpsDemohtmlview2

var BooksCollection = BackboneCollectionextend( model Book )

Instantiating a collectionvar collection1 = new BooksCollection()var book3 = new Book( ID 3 BookName Book 3 ) collection1add(book3)

var book1 = new Book( ID 1 BookName Book 1 )var book2 = new Book( ID 2 BookName Book 2 ) var collection2 = new BooksCollection([book1 book2])

var book2_changed = new Book( ID 2 BookName Changed model ) collection2add(book2_changed merge true )

Collections

Some Backbone library for collectionshellip

var book0 = new Book( ID 0 BookName Book 0 )collection2add(book0 at0)

collection2remove(book0) to remove model from function

collection1reset() to empty the collection

collection2reset([book4 book5]) reset and add models to collection

consolelog(collection2length) prints 2

To fetch models from collectionvar bookRecieved = collection2at(3)

var index = collection2indexOf(bookRecieved)

var bookFetchedbyId = collection2get(2) fetch using model attributes

var BooksCollection = BackboneCollectionextend( model Book url httplocalhost51377apiBooks)

var collection4 = new BooksCollection() collection4fetch( success function (collection4 response) collection4each(function (item index all) itemset(BookName itemget(BookName) + _updated) itemsave() ) )

Saving Collection using REST service

Views

Creating a simple viewvar bookView= BackboneViewextend( initialize function() consolelog(sampleView has been created) )

var view1 = new bookView()

Associating model with a view

var book1 = new Book( ID 1 BookName Book 1 )var m_bookView = new bookView(model book1)

View for DOM elementvar view1 = new bookView( el $(sampleDiv) )

To create a DOM element dynamically with view

var sampleView2 = BackboneViewextend( tagname div id sampleDivlsquo )

var bookView = BackboneViewextend( tagname li model Book events click itemClicked itemClicked function () thisrender() render function () this$elhtml(ltligt + thismodelget(BookName) + ltligt) return this )

View listening to DOM events

var bookListView = BackboneViewextend( model BooksCollection initialize function() thislistenTo(thismodel add thismodelUpdated)

modelUpdated function() thisrender() )

View listening to Model changes

Removing a view from DOM

bookViewremove()

var myRouter = BackboneRouterextend( greeting null container null view1 null view2 null initialize function() thisgreeting = new GreetModel( Message Hello world ) thiscontainer = new ContainerView( el $(rAppContainer) model thisgreeting ) routes handleRoute1 view1 handleRoute1 view2 handleRoute2ldquo handleRoute1 function () if (thisview1 == null) thisview1 = new View1( model thisgreeting ) thiscontainermyChildView = thisview1 thiscontainerrender() )

Routers

To make Backbone listen to Routes

$(document)ready(function () router = new myRouter() Backbonehistorystart() )

To navigate to view within the applicationrouternavigate(view1)

httpsDemohtmlview1

httpsDemohtmlview2

Some Backbone library for collectionshellip

var book0 = new Book( ID 0 BookName Book 0 )collection2add(book0 at0)

collection2remove(book0) to remove model from function

collection1reset() to empty the collection

collection2reset([book4 book5]) reset and add models to collection

consolelog(collection2length) prints 2

To fetch models from collectionvar bookRecieved = collection2at(3)

var index = collection2indexOf(bookRecieved)

var bookFetchedbyId = collection2get(2) fetch using model attributes

var BooksCollection = BackboneCollectionextend( model Book url httplocalhost51377apiBooks)

var collection4 = new BooksCollection() collection4fetch( success function (collection4 response) collection4each(function (item index all) itemset(BookName itemget(BookName) + _updated) itemsave() ) )

Saving Collection using REST service

Views

Creating a simple viewvar bookView= BackboneViewextend( initialize function() consolelog(sampleView has been created) )

var view1 = new bookView()

Associating model with a view

var book1 = new Book( ID 1 BookName Book 1 )var m_bookView = new bookView(model book1)

View for DOM elementvar view1 = new bookView( el $(sampleDiv) )

To create a DOM element dynamically with view

var sampleView2 = BackboneViewextend( tagname div id sampleDivlsquo )

var bookView = BackboneViewextend( tagname li model Book events click itemClicked itemClicked function () thisrender() render function () this$elhtml(ltligt + thismodelget(BookName) + ltligt) return this )

View listening to DOM events

var bookListView = BackboneViewextend( model BooksCollection initialize function() thislistenTo(thismodel add thismodelUpdated)

modelUpdated function() thisrender() )

View listening to Model changes

Removing a view from DOM

bookViewremove()

var myRouter = BackboneRouterextend( greeting null container null view1 null view2 null initialize function() thisgreeting = new GreetModel( Message Hello world ) thiscontainer = new ContainerView( el $(rAppContainer) model thisgreeting ) routes handleRoute1 view1 handleRoute1 view2 handleRoute2ldquo handleRoute1 function () if (thisview1 == null) thisview1 = new View1( model thisgreeting ) thiscontainermyChildView = thisview1 thiscontainerrender() )

Routers

To make Backbone listen to Routes

$(document)ready(function () router = new myRouter() Backbonehistorystart() )

To navigate to view within the applicationrouternavigate(view1)

httpsDemohtmlview1

httpsDemohtmlview2

var BooksCollection = BackboneCollectionextend( model Book url httplocalhost51377apiBooks)

var collection4 = new BooksCollection() collection4fetch( success function (collection4 response) collection4each(function (item index all) itemset(BookName itemget(BookName) + _updated) itemsave() ) )

Saving Collection using REST service

Views

Creating a simple viewvar bookView= BackboneViewextend( initialize function() consolelog(sampleView has been created) )

var view1 = new bookView()

Associating model with a view

var book1 = new Book( ID 1 BookName Book 1 )var m_bookView = new bookView(model book1)

View for DOM elementvar view1 = new bookView( el $(sampleDiv) )

To create a DOM element dynamically with view

var sampleView2 = BackboneViewextend( tagname div id sampleDivlsquo )

var bookView = BackboneViewextend( tagname li model Book events click itemClicked itemClicked function () thisrender() render function () this$elhtml(ltligt + thismodelget(BookName) + ltligt) return this )

View listening to DOM events

var bookListView = BackboneViewextend( model BooksCollection initialize function() thislistenTo(thismodel add thismodelUpdated)

modelUpdated function() thisrender() )

View listening to Model changes

Removing a view from DOM

bookViewremove()

var myRouter = BackboneRouterextend( greeting null container null view1 null view2 null initialize function() thisgreeting = new GreetModel( Message Hello world ) thiscontainer = new ContainerView( el $(rAppContainer) model thisgreeting ) routes handleRoute1 view1 handleRoute1 view2 handleRoute2ldquo handleRoute1 function () if (thisview1 == null) thisview1 = new View1( model thisgreeting ) thiscontainermyChildView = thisview1 thiscontainerrender() )

Routers

To make Backbone listen to Routes

$(document)ready(function () router = new myRouter() Backbonehistorystart() )

To navigate to view within the applicationrouternavigate(view1)

httpsDemohtmlview1

httpsDemohtmlview2

Views

Creating a simple viewvar bookView= BackboneViewextend( initialize function() consolelog(sampleView has been created) )

var view1 = new bookView()

Associating model with a view

var book1 = new Book( ID 1 BookName Book 1 )var m_bookView = new bookView(model book1)

View for DOM elementvar view1 = new bookView( el $(sampleDiv) )

To create a DOM element dynamically with view

var sampleView2 = BackboneViewextend( tagname div id sampleDivlsquo )

var bookView = BackboneViewextend( tagname li model Book events click itemClicked itemClicked function () thisrender() render function () this$elhtml(ltligt + thismodelget(BookName) + ltligt) return this )

View listening to DOM events

var bookListView = BackboneViewextend( model BooksCollection initialize function() thislistenTo(thismodel add thismodelUpdated)

modelUpdated function() thisrender() )

View listening to Model changes

Removing a view from DOM

bookViewremove()

var myRouter = BackboneRouterextend( greeting null container null view1 null view2 null initialize function() thisgreeting = new GreetModel( Message Hello world ) thiscontainer = new ContainerView( el $(rAppContainer) model thisgreeting ) routes handleRoute1 view1 handleRoute1 view2 handleRoute2ldquo handleRoute1 function () if (thisview1 == null) thisview1 = new View1( model thisgreeting ) thiscontainermyChildView = thisview1 thiscontainerrender() )

Routers

To make Backbone listen to Routes

$(document)ready(function () router = new myRouter() Backbonehistorystart() )

To navigate to view within the applicationrouternavigate(view1)

httpsDemohtmlview1

httpsDemohtmlview2

Associating model with a view

var book1 = new Book( ID 1 BookName Book 1 )var m_bookView = new bookView(model book1)

View for DOM elementvar view1 = new bookView( el $(sampleDiv) )

To create a DOM element dynamically with view

var sampleView2 = BackboneViewextend( tagname div id sampleDivlsquo )

var bookView = BackboneViewextend( tagname li model Book events click itemClicked itemClicked function () thisrender() render function () this$elhtml(ltligt + thismodelget(BookName) + ltligt) return this )

View listening to DOM events

var bookListView = BackboneViewextend( model BooksCollection initialize function() thislistenTo(thismodel add thismodelUpdated)

modelUpdated function() thisrender() )

View listening to Model changes

Removing a view from DOM

bookViewremove()

var myRouter = BackboneRouterextend( greeting null container null view1 null view2 null initialize function() thisgreeting = new GreetModel( Message Hello world ) thiscontainer = new ContainerView( el $(rAppContainer) model thisgreeting ) routes handleRoute1 view1 handleRoute1 view2 handleRoute2ldquo handleRoute1 function () if (thisview1 == null) thisview1 = new View1( model thisgreeting ) thiscontainermyChildView = thisview1 thiscontainerrender() )

Routers

To make Backbone listen to Routes

$(document)ready(function () router = new myRouter() Backbonehistorystart() )

To navigate to view within the applicationrouternavigate(view1)

httpsDemohtmlview1

httpsDemohtmlview2

var bookView = BackboneViewextend( tagname li model Book events click itemClicked itemClicked function () thisrender() render function () this$elhtml(ltligt + thismodelget(BookName) + ltligt) return this )

View listening to DOM events

var bookListView = BackboneViewextend( model BooksCollection initialize function() thislistenTo(thismodel add thismodelUpdated)

modelUpdated function() thisrender() )

View listening to Model changes

Removing a view from DOM

bookViewremove()

var myRouter = BackboneRouterextend( greeting null container null view1 null view2 null initialize function() thisgreeting = new GreetModel( Message Hello world ) thiscontainer = new ContainerView( el $(rAppContainer) model thisgreeting ) routes handleRoute1 view1 handleRoute1 view2 handleRoute2ldquo handleRoute1 function () if (thisview1 == null) thisview1 = new View1( model thisgreeting ) thiscontainermyChildView = thisview1 thiscontainerrender() )

Routers

To make Backbone listen to Routes

$(document)ready(function () router = new myRouter() Backbonehistorystart() )

To navigate to view within the applicationrouternavigate(view1)

httpsDemohtmlview1

httpsDemohtmlview2

var bookListView = BackboneViewextend( model BooksCollection initialize function() thislistenTo(thismodel add thismodelUpdated)

modelUpdated function() thisrender() )

View listening to Model changes

Removing a view from DOM

bookViewremove()

var myRouter = BackboneRouterextend( greeting null container null view1 null view2 null initialize function() thisgreeting = new GreetModel( Message Hello world ) thiscontainer = new ContainerView( el $(rAppContainer) model thisgreeting ) routes handleRoute1 view1 handleRoute1 view2 handleRoute2ldquo handleRoute1 function () if (thisview1 == null) thisview1 = new View1( model thisgreeting ) thiscontainermyChildView = thisview1 thiscontainerrender() )

Routers

To make Backbone listen to Routes

$(document)ready(function () router = new myRouter() Backbonehistorystart() )

To navigate to view within the applicationrouternavigate(view1)

httpsDemohtmlview1

httpsDemohtmlview2

var myRouter = BackboneRouterextend( greeting null container null view1 null view2 null initialize function() thisgreeting = new GreetModel( Message Hello world ) thiscontainer = new ContainerView( el $(rAppContainer) model thisgreeting ) routes handleRoute1 view1 handleRoute1 view2 handleRoute2ldquo handleRoute1 function () if (thisview1 == null) thisview1 = new View1( model thisgreeting ) thiscontainermyChildView = thisview1 thiscontainerrender() )

Routers

To make Backbone listen to Routes

$(document)ready(function () router = new myRouter() Backbonehistorystart() )

To navigate to view within the applicationrouternavigate(view1)

httpsDemohtmlview1

httpsDemohtmlview2

To make Backbone listen to Routes

$(document)ready(function () router = new myRouter() Backbonehistorystart() )

To navigate to view within the applicationrouternavigate(view1)

httpsDemohtmlview1

httpsDemohtmlview2

Thanks

• Backbone JS
• Why
• Backbone JS (2)
• Slide 4
• What it contains
• Backbone JS (3)
• Slide 7
• Slide 8
• Slide 9
• Slide 10
• Slide 11
• Slide 12
• Slide 13
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Slide 18
• Slide 19
• Slide 20
• Slide 21
• Slide 22
• Slide 23
• Slide 24
• Slide 25
• Slide 26
• Slide 27
• Slide 28
• Slide 29
• Slide 30
• Slide 31
• Slide 32
• Slide 33
• Slide 34
• Slide 35
• Slide 36