The Anatomy of BackboneJS

7/31/2019 The Anatomy of BackboneJS

1/88


2/88

Introduction- L E V E L 1 -


3/88

{ description: 'Pick up milk', status: 'incomplete', id: 1 }

$.getJSON('/todo', function(data) {To get the todo data

The data returned

Introducing the Todo App


4/88

Checking off a todo item

Add deadlines

Reorder & sort

Adding Funct ionality

We lose the data structureMethods can be disorganized


5/88

Without Backbone.j sServer Client

Data DOM


Pick up milk

We need an object to maintain the data


6/88

Get your truth out of the DOM

Introducing Backbone.js

- Jeremy Ashkenas

Provides client-side app structureModels to represent data

Views to hook up models to the DOM

Synchronizes data to/from server


7/88

Server Client

DOM

Data Models

With Backbone.j s

var todoItem =newTodoItem(


);

var TodoItem = Backbone.Model.extend({});

To create a model class

To create a model instance


8/88

Backbone Models

To get an attribute

todoItem.set({status: 'complete'});

todoItem.get('description'); 'Pick up milk'

To set an attribute

todoItem.save();

Sync to the server

Configuration needed


{ description: 'Pick up milk', status: 'incomplete', id: 1 });

Models


9/88

Displaying the DataServer Client

Data Models DOM

var todoView =newTodoView({ model: todoItem});

To create a view class

To create a view instance

Views

Builds the HTMLProvides the data

var TodoView = Backbone.View.extend({});


10/88

Rendering the Viewvar TodoView = Backbone.View.extend({

});

render: function(){var html =''+this.model.get('description') +'';$(this.el).html(html);

}

Every view has a top level ELement

default

...


11/88

Rendering the Viewvar TodoView = Backbone.View.extend({

});


}

todoView.render();var todoView =newTodoView({ model: todoItem });

console.log(todoView.el);

Pick up milk


12/88

Models- L E V E L 2 -


13/88

Reviewing Models

To get an attribute

todoItem.set({status: 'complete'});

todoItem.get('description'); 'Pick up milk'

To set an attribute


{ description: 'Pick up milk', status: 'incomplete' });

var TodoItem = Backbone.Model.extend({});

Generating a model instance

Generating a model class


14/88

Fetching Data from the ServerServer Client

Data Model

DOM

var todoItem =newTodoItem();

To populate model from server

URL to get JSON data for model

todoItem.fetch();

todoItem.url ='/todo';

todoItem.get('description');

'Pick up milk'

/todo isnt a good URL

{ id: 1,description: 'Pick up milk', status: 'incomplete' }


15/88

Fetching Data from the Server

Fetch todo with id = 1

todoItem.fetch();

{ id: 1,description: 'Pick up milk', status: 'incomplete' }

var TodoItem = Backbone.Model.extend({urlRoot: '/todos'});

var todoItem =newTodoItem({id: 1})

RESTful web service

(Railsflavor)

GET /todos/1

todoItem.set({description: 'Pick up cookies.'});

todoItem.save(); PUT /todos/1

Update the todo

with JSON params


16/88

Creating & Destroying a New Todo

2


todoItem.set({description: 'Fill prescription.'});

todoItem.save(); POST /todos

with JSON params

todoItem.get('id');

todoItem.toJSON();

{ id: 2,description: 'Fill prescription', status: 'incomplete' }

Get JSON from model

todoItem.destroy(); DELETE /todos/2


17/88

Default Values

'Empty todo...'

var TodoItem = Backbone.Model.extend({

defaults: {description: 'Empty todo...',

status: 'incomplete'}

});


todoItem.get('description');

'incomplete'

todoItem.get('status');


18/88

Models Can Have Events

todoItem.trigger('event-name');

todoItem.on('event-name', function(){ alert('event-name happened!');

});

Run the event

To listen for an event on a model


19/88

Special Events

todoItem.on('change', doThing);

To listen for changes

todoItem.set({description: 'Fill prescription.'});

Event triggered on change

todoItem.set({description: 'Fill prescription.'},

{silent: true});

Set without triggering event

todoItem.off('change', doThing);Remove event listener

vardoThing =function() {

...}


20/88

Special EventstodoItem.on(, );

Built-in events

change When an attribute is modified

change: When is modified

destroy When a model is destroyed

sync Whenever successfully synced

error When model save or validation fails

all Any triggered event


21/88

Views- L E V E L 3 -


22/88

More on the View Element

console.log(simpleView.el);

var SimpleView = Backbone.View.extend({});

var simpleView =newSimpleView();

console.log(simpleView.el);

var SimpleView = Backbone.View.extend({tagName: 'li'});

var simpleView =newSimpleView();

tagName can be any HTML tag


23/88

More on the View Elementvar TodoView = Backbone.View.extend({

tagName: 'article',id: 'todo-view',

className: 'todo'});

var todoView =newTodoView();



24/88

More on the View Element

I want to use a jQuery method

var todoView =newTodoView();


$('#todo-view').html();

$(todoView.el).html();

todoView.$el.html();

el is a DOM Element

Shortcut

Good since the els id maybe dynamic


25/88

Back in Level 1var TodoView = Backbone.View.extend({

});


}



Pick up milk


26/88

Adding the EL attributesvar TodoView = Backbone.View.extend({

});

render: function(){var html =''+this.model.get('description') +'';

$(this.el).html(html);

}


className: 'todo',


27/88

Fixing the EL



Pick up milk

$(this.el).html(html);

var TodoView = Backbone.View.extend({

});

render: function(){var html =''+this.model.get('description') +'';

}


className: 'todo',

this.$el.html( );html


28/88

Using a Templatevar TodoView = Backbone.View.extend({

});

render: function(){

}

template: _.template(''),

this.$el.html(this.template(attributes));

The underscore library

...

Pick up milk

todoView.render();

var todoView =newTodoView({ model: todoItem });


varattributes = this.model.toJSON();


29/88

Templating EnginesUnderscore.js

Mustache.js

Haml-js

Eco

{{description}}

%h3= description


30/88

Adding View Events

$("h3").click(alertStatus);

functionalertStatus(e) { alert('Hey you clicked the h3!');}

In jQuery to add an alert on click

Not how we do things in Backbone


31/88

View Events


alertStatus: function(e){ alert('Hey you clicked the h3!');

}

});

Views are responsible for responding to user interaction

events: { "click h3": "alertStatus"

},

Selector is scoped to the elthis.$el.delegate('h3', 'click', alertStatus);

" ": ""


32/88

Views Can Have Many Eventsvar DocumentView = Backbone.View.extend({

events: {

"dblclick" : "open", "click .icon.doc" : "select",

"click .show_notes" : "toggleNotes",

"click .title .lock" : "editAccessLevel", "mouseover .title .date" : "showTooltip"

},

...

});

anywhere on EL


33/88

View Event Optionsvar SampleView = Backbone.View.extend({

events: { " ": ""

},

...

});

Events

change

focusout

mousedownmouseover

select

click

hover

mouseentermouseup

unload

dbclick

keydown

mouseleaveready

focus

keypress

mousemoveresize

focusin

load

mouseoutscroll


34/88


35/88

Review our Model View


var todoView =newTodoView({ model: todoItem });

Pick up milk

});


'),template: _.template('

}

render: function(){

this.$el.html(this.template(this.model.toJSON()));

todoView.render();


36/88

Adding a checkbox

});


'),

template: _.template('

}

render: function(){this.$el.html(this.template(this.model.toJSON()));

'+

''+

'

How do we update the model whencheckbox changes?


37/88

View events update t he Model

});

}

Models DOMViews

Build the HTMLProvides the Data

Models DOMViews

DOM eventUpdate the data

ServerData

Server

Data


38/88

R


39/88

Refactor to the Model

});


events: {

'change input': 'toggleStatus'},

toggleStatus: function(){

if(this.get('status') ==='incomplete'){

this.set({'status': 'complete'});}else{

this.set({'status': 'incomplete'});

}

}this.model.toggleStatus();



}});

Model logic in Model


40/88

Sync changes to server

if(this.get('status') ==='incomplete'){this.set({'status': 'complete'});

}else{

this.set({'status': 'incomplete'});}



}});

this.save();

PUT /todos/1

l h


41/88

Update view to reflect changes.complete {

color: #bbb; text-decoration: line-through;}

template: _.template(''+ '/>'+

' ')

update TodoView template:

How should we update the viewwhen the model changes?

R d h


42/88

Re-render the view

});


events: {



},

this.model.toggleStatus();

this.render();

render: function(){

}


Doesnt work for other model changes

M d l d h h V


43/88

Model updates change the View

Models DOMViews

DOM eventUpdate the data

Models DOMViews

Notify changed Re-renders

Use Model Events

R d h


44/88

Re-render the view

});


events: {



},

this.model.toggleStatus();

initialize: function(){

this.model.on('change', this.render, this);

},

render: function(){

}


Why the third argument?

Wh h ?


45/88

What is this?

render: function(){

}


window

render()

render context is not the view

);this.model.on('change', this.render

Wh h ?


46/88

What is this?

render: function(){

}


todoView

render()

render context is bound to the view

);this.model.on('change', this.render, this


47/88

W h


48/88

Watch it in acti on


49/88

Collections- L E V E L 5 -

S t f M d l


50/88

Set of Modelsvar todoItem1 =newTodoItem();

var todoItem2 =newTodoItem();var todoList = [todoitem1, todoItem2];

TodoList manages a set of

TodoItem model instances

var TodoList = Backbone.Collection.extend({

model: TodoItem});

var todoList =newTodoList();

Add/R /G t


51/88

Add/Remove/Get

add a model instance

get model instance at index 0

get by id 1

get number of models

2todoList.length;

todoList.add(todoItem1);

todoList.at(0);

todoList.get(1);

removing a model instancetodoList.remove(todoItem1);

todoItem1

todoItem1

B lk P l t


52/88

Bulk Populat ionreset

TodoItem

todoList

TodoItem TodoItem

Each object in Array becomes a TodoItem

todoList.reset(todos);

var todos = [{description: 'Pick up milk.', status: 'incomplete'},{description: 'Get a car wash', status: 'incomplete'},

{description: 'Learn Backbone', status: 'incomplete'}

];

F t h D t f th S


53/88

Fetching Data from the Server

var TodoList = Backbone.Collection.extend({url: '/todos'

});

populate collection from server

todoList.fetch();

URL to get JSON data from

[

{description: 'Pick up milk.', status: 'incomplete', id: 1},{description: 'Get a car wash', status: 'incomplete', id: 2}

]

2todoList.length;

GET /todos

C ll t C H E t


54/88

Collections Can Have Events

todoList.trigger('event-name');

todoList.on('event-name', function(){ alert('event-name happened!');

});

Run the event

To listen for an event on a collection

Works just like models!

S l E t


55/88

Special Eventslisten for reset

Event triggered on reset & fetch

without notification

todoList.off('reset', doThing);

Remove event listener

vardoThing =function() {

...}todoList.on('reset', doThing);

todoList.fetch();todoList.reset();

todoList.fetch({silent: true});

todoList.reset({silent: true});

S l E t C ll t


56/88

Special Events on CollectiontodoList.on(, );

Built-in Events

add When a model is added

remove When a model is removed

reset When reset or fetched

todoList.on('add', function(todoItem){

...});

todoItem is the model being added

M d l E t


57/88

Model EventsModels in collection

Events triggered on a model in acollection will also be triggered onthe collection

change When an attribute is modifiedchange: When is modified

destroy When a model is destroyed

sync Whenever successfully syncederror When an attribute is modified

all When an attribute is modified

It t


58/88

Iteration

todoList.reset([{description: 'Pick up milk.', status: 'incomplete', id: 1},

{description: 'Get a car wash.', status: 'complete', id: 2}]);

Setup our collection

Alert each models descriptiontodoList.forEach(function(todoItem){

alert(todoItem.get('description'));

});

It t t d


59/88

Iterati on cont inuedBuild an array of descriptions

todoList.map(function(todoItem){ return todoItem.get('description');

});

['Pick up milk.','Get a car wash']

Filter models by some criteriatodoList.filter(function(todoItem){

return todoItem.get('status') ==="incomplete";

});

Returns array of itemsthat are incomplete

Oth It ti f t i


60/88

Other Iteratio n funct ion s

http://documentcloud.github.com/backbone/#Collection-Underscore-Methods

forEach reduce reduceRight

find filter rejectevery all some

include invoke max

min sortBy groupBy

sortedIndex shuffle toArraysize first initial

rest last without

indexOf lastIndexOf isEmpty

chain


61/88

Collections & Views- L E V E L 6 -

T d Li t!


62/88

Todo List!

Collection + View == Collection View!

R i M d l Vi


63/88

Review our Model View


var todoView =newTodoView({model: todoItem});console.log(todoView.render().el);

Pick up milk

Model View1 to 1

var TodoView = Backbone.View.extend({ render: function(){

this.$el.html(this.template(this.model.toJSON())); returnthis;}

...

});

C ll ti Vi w


64/88

Collection Views

Model ViewModel View

Model View

Model View

Collection View

1 to many

A Collection View doesnt render any of its own HTML.It delegates that responsibility to the model views.

D fi d R d


65/88

Define and Rendervar TodoListView = Backbone.View.extend({});

var todoListView =newTodoListView({collection: todoList});

first crack at render

render: function(){

var todoView =newTodoView({model: todoItem});this.$el.append(todoView.render().el);

});

}

forEach changes context

this.collection.forEach(function(todoItem){

R d i


66/88

RenderingaddOne

render: function(){ );

}

this.collection.forEach(

addOne: function(todoItem){

}

var todoView =newTodoView({model: todoItem});this.$el.append(todoView.render().el);

this.addOne, this

forEach saves context

R d ti d


67/88

Render cont inued

}

}

console.log(todoListView.el);

var todoListView =newTodoListView({collection: todoList});

Pick up milk.

Learn backbone.

todoListView.render();

Addi w M d ls


68/88

Adding new Models

newTodoItem not in DOM

var newTodoItem =newTodoItem({

description: 'Take out trash.',

status: 'incomplete'

});todoList.add(newTodoItem);

var TodoListView = Backbone.View.extend({


var todoView =newTodoView({model: todoItem}); this.$el.append(todoView.render().el);

},

render: function(){ this.collection.forEach(this.addOne, this);

}

});

List t th dd E t


69/88

Listen to the add Eventvar TodoListView = Backbone.View.extend({

initialize: function(){ this.collection.on('add', this.addOne, this);

},

var newTodoItem =newTodoItem({description: 'Take out trash.',

status: 'incomplete'

});todoList.add(newTodoItem);


var todoView =newTodoView({model: todoItem});

this.$el.append(todoView.render().el);

}, render: function(){

this.collection.forEach(this.addOne, this);}

});

Add Eve t i A t io


70/88

Add Event in Act ion

Reset Event


71/88

Reset Event

var todoList =newTodoList();var todoListView =newTodoListView({

collection: todoList

});todoList.fetch();

todoList

reset

var TodoListView = Backbone.View.extend({


this.collection.on('add', this.addOne, this);

render: function(){ this.collection.forEach(this.addOne, this);

}

},

addOne: function(todoItem){ var todoView =newTodoView({model: todoItem});


},

});

Reset Event


72/88

addAll: function(){

},

Reset Eventvar TodoListView = Backbone.View.extend({


this.collection.on('add', this.addOne, this);

render: function(){

this.collection.forEach(this.addOne, this);

}

}, addOne: function(todoItem){

var todoView =newTodoView({model: todoItem});


},

});

this.collection.on('reset', this.addAll, this);

this.addAll();

todoList.fetch();

todoList

reset

Reset Event in Act ion


73/88

Reset Event in Act ion

removing from collection

Fixing remove with Custom Events


74/88

Fixing remove with Custom EventstodoList.remove(todoItem);

todoList

remove

TodoList Collection


this.model.on('hide', this.remove, this);

}

TodoItem View

todoItem

hide

initialize: function(){ this.on('remove', this.hideModel);

},

hideModel: function(model){model.trigger('hide');

}

Bringing it all together


75/88

Bringing it all together


76/88

Router and istor- L E V E L 7 -

The Problem


77/88

The Problem

$('a.todo').click(function(e){

e.preventDefault(); // show single todo

})

The Problem


78/88

The Problem

Router & History to the rescue!

The Router


79/88

The RouterRouters map URLs to actionsvar router =newBackbone.Router({

routes: { "todos": 'index' },

index: function(){

...

}

});

/todos

index: function(){ ... }

when the url path is

or #todos

The Router


80/88

The RouterRoutes match parameter parts

Matches

URL arams

var router =newBackbone.Router({routes: { "todos/:id": 'show' }

show: function(id){ ... }})

/todos/1 id = 1

/todos/2

id = 2/todos/hello id = hello

/todos/foo-bar id = foo-bar

More Route Matchers


81/88

More Route Matchersmatcher URL params

* Wildcard matches everythingafter file/

search/:query search/ruby query = rubysearch/:query/p:page search/ruby/p2 query = ruby, page = 2

folder/:name-:mode folder/foo-r name = foo, mode = r

file/*path file/hello/world.txt path = hello/world.txt

Triggering Routes


82/88

Triggering RoutesUsing navigate

router.navigate("todos/1", {trigger: true});

Using links

These wont work yet

History


83/88

History

});

Hashbangs (#)

HTML5 pushState

Backbone.history


84/88

Backbone.history

Backbone.history.start();

router.navigate("todos/1")

pushState off

#todos/1

router.navigate("todos/1") /todos/1

Backbone.history.start({pushState: true});

pushState on

Show Act ion


85/88

routes: {

Show Act ion

var todoList =newTodoList();

var TodoApp =newTodoRouter({todoList: todoList});

Define router class

Instantiate router instance

var TodoRouter = Backbone.Router.extend({

show: function(id){

this.todoList.focusOnTodoItem(id);},

initialize: function(options){

this.todoList = options.todoList;}

});

"todos/:id": "show" },

Index Action


86/88

routes: {

In x A nvar TodoRouter = Backbone.Router.extend({

show: function(id){

this.todoList.focusOnTodoItem(id);},

initialize: function(options){

this.todoList = options.todoList;

}});

"todos/:id": "show" },

"": "index",

index: function(){

this.todoList.fetch();

},

In Acti on


87/88

A

});

App Organizat ion


88/88

App g zvar TodoApp =new (Backbone.Router.extend({

routes: { "": "index", "todos/:id": "show" },

initialize: function(){this.todoList =newTodoList();this.todosView =newTodoListView({collection: this.todoList});

$('#app').append(this.todosView.el);

},

index: function(){

this.todoList.fetch();},

start: function(){Backbone.history.start({pushState: true});

},

show: function(id){ this.todoList.focusOnTodoItem(id);

}}));

$(function(){ TodoApp.start() })

The Anatomy of BackboneJS

Documents

Transcript of The Anatomy of BackboneJS