Introducing Backbone.js

/
Toon Ketels @toonketels

View Slide

Drupal Developer
backbone.js - d3.js - grunt.js
@toonketels

View Slide

What is Backbone
Models
Collections
Views
Wrap up

View Slide

View Slide

Backbone.js gives structure to web
applications by providing models with key-
value binding and custom events, collections
with a rich API of enumerable functions,
views with declarative event handling, and
connects it all to your existing API over a
RESTful JSON interface.
backbonejs.org

View Slide

structure
models
collections
views
connect to backend over JSON

View Slide

View Slide

angular.js
ember.js
spine.js
knockout.js
sammy.js

View Slide

View Slide

marionette.js
chaplin.js
vertebrae.js
backbone boilerplate
thorax

View Slide

underscore.js / lo-dash.js
json2.js
jQuery / Zepto

View Slide

View Slide

the fundamental building blocks of backbone
how they relate together
how they help you structure your code

View Slide

How to use Backbone and Drupal
Tutorial on building your first backbone app

View Slide

Let's focus on understanding the
fundamentals, so we can hack existing apps,
know were everything goes and don't curse
backbone.js for all the complexity it adds,
'cause... it is making our lives easier.

View Slide

Committed and pushed to 8.x
webchick

View Slide

n
e
w B
a
c
k
b
o
n
e
.
M
o
d
e
l
(
)

View Slide

View Slide

Models are the heart of any JavaScript
application, containing the interactive data as
well as a large part of the logic surrounding it:
conversions, validation, computed properties,
and access control.
backbonejs.org/#Model

View Slide

An object to group data and functions related
to the data together.

View Slide

node
user
post
comment

View Slide

View Slide

v
a
r t
o
o
n = n
e
w B
a
c
k
b
o
n
e
.
M
o
d
e
l
(
{
n
a
m
e
: "
T
o
o
n K
e
t
e
l
s
"
,
a
g
e
: 3
0
,
j
o
b
: "
D
e
v
e
l
o
p
e
r
"
,
b
i
o
: "

S
c
r
u
m m
a
s
t
e
r
, b
a
c
k
e
n
d D
r
u
p
a
l d
e
v
e
l
o
p
e
r
.

"
,
u
i
d
: 7
5
4
4
}
)
;

View Slide

{
_
c
h
a
n
g
i
n
g
: f
a
l
s
e
,
_
p
e
n
d
i
n
g
: f
a
l
s
e
,
_
p
r
e
v
i
o
u
s
A
t
t
r
i
b
u
t
e
s
: {
/
*
.
.
.
*
/
}
,
_
a
t
t
r
i
b
u
t
e
s
: {
/
*
.
.
.
*
/
}
,
c
h
a
n
g
e
d
: {
/
*
.
.
.
*
/
}
,
c
i
d
: "
c
i
d
"
}
;

View Slide

View Slide

t
o
o
n
.
h
a
s
(
'
a
g
e
'
)
;
t
o
o
n
.
g
e
t
(
'
a
g
e
'
)
;
t
o
o
n
.
e
s
c
a
p
e
(
'
b
i
o
'
)
;

View Slide

t
o
o
n
.
s
e
t
(
'
a
g
e
'
, 3
1
)
;
t
o
o
n
.
c
h
a
n
g
e
d
;
t
o
o
n
.
p
r
e
v
i
o
u
s
A
t
t
r
i
b
u
t
e
s
(
)
;

View Slide

Hey, I've changed!

View Slide

t
o
o
n
.
o
n
(
'
c
h
a
n
g
e
'
, f
u
n
c
t
i
o
n
(
m
o
d
e
l
) {
c
o
n
s
o
l
e
.
l
o
g
(
'
c
h
a
n
g
e
d
'
)
;
c
o
n
s
o
l
e
.
l
o
g
(
m
o
d
e
l
)
;
}
)
;

View Slide

t
o
o
n
.
o
n
(
'
c
h
a
n
g
e
:
a
g
e
'
, f
u
n
c
t
i
o
n
(
m
o
d
e
l
, v
a
l
u
e
) {
c
o
n
s
o
l
e
.
l
o
g
(
'
A
g
e h
a
s h
a
n
g
e
d
'
)
;
c
o
n
s
o
l
e
.
l
o
g
(
m
o
d
e
l
)
;
c
o
n
s
o
l
e
.
l
o
g
(
v
a
l
u
e
)
;
}
)
;

View Slide

View Slide

v
a
r P
e
r
s
o
n = B
a
c
k
b
o
n
e
.
M
o
d
e
l
.
e
x
t
e
n
d
(
{
/
/ C
u
s
t
o
m m
e
t
h
o
d
s
}
)
;
v
a
r t
o
o
n = n
e
w P
e
r
s
o
n
(
{
.
.
.
}
)
;

View Slide

View Slide

v
a
r P
e
r
s
o
n = B
a
c
k
b
o
n
e
.
M
o
d
e
l
.
e
x
t
e
n
d
(
{
i
n
i
t
i
a
l
i
z
e
: f
u
n
c
t
i
o
n
(
) {
c
o
n
s
o
l
e
.
l
o
g
(
'
I r
u
n o
n s
t
a
r
t
u
p
'
)
;
}
}
)
;

View Slide

v
a
r P
e
r
s
o
n = B
a
c
k
b
o
n
e
.
M
o
d
e
l
.
e
x
t
e
n
d
(
{
d
e
f
a
u
l
t
s
: {
c
o
u
n
t
r
y
: "
B
e
l
g
i
u
m
"
,
p
r
o
f
e
s
s
i
o
n
: "
A
n
a
l
y
s
t
"
}
}
)
;

View Slide

v
a
r P
e
r
s
o
n = B
a
c
k
b
o
n
e
.
M
o
d
e
l
.
e
x
t
e
n
d
(
{
v
a
l
i
d
a
t
e
: f
u
n
c
t
i
o
n
(
a
t
t
r
i
b
u
t
e
s
, o
p
t
i
o
n
s
) {
i
f (
t
y
p
e
o
f a
t
t
r
i
b
u
t
e
s
.
a
g
e !
=
= "
n
u
m
b
e
r
"
) {
r
e
t
u
r
n "
A
g
e s
h
o
u
l
d b
e a n
u
m
b
e
r
"
;
}
}
}
)
;

View Slide

t
o
o
n
.
s
e
t
(
'
a
g
e
'
, '
n
o
n
e
'
)
;
t
o
o
n
.
i
s
V
a
l
i
d
(
)
; /
/ f
a
l
s
e
t
o
o
n
.
v
a
l
i
d
a
t
i
o
n
E
r
r
o
r
; /
/ "
A
g
e s
h
o
u
l
d b
e a n
u
m
b
e
r
"
t
o
o
n
.
s
e
t
(
'
a
g
e
'
, '
n
o
n
e
'
, {
v
a
l
i
d
a
t
e
: t
r
u
e
}
)
;

View Slide

v
a
r P
e
r
s
o
n = B
a
c
k
b
o
n
e
.
M
o
d
e
l
.
e
x
t
e
n
d
(
{
i
d
A
t
t
r
i
b
u
t
e
: '
u
i
d
'
}
)
;

View Slide

v
a
r P
e
r
s
o
n = B
a
c
k
b
o
n
e
.
M
o
d
e
l
.
e
x
t
e
n
d
(
{
i
d
A
t
t
r
i
b
u
t
e
: '
u
i
d
'
,
u
r
l
R
o
o
t
: '
u
s
e
r
'
}
)
;

View Slide

v
a
r t
o
o
n = n
e
w P
e
r
s
o
n
(
{
u
i
d
: 1
}
)
;
t
o
o
n
.
f
e
t
c
h
(
)
;
t
o
o
n
.
s
e
t
(
'
a
g
e
'
, 3
1
)
;
t
o
o
n
.
s
a
v
e
(
)
;

View Slide

View Slide

Create a model
Get/set attributes, previousAttributes
Emit events
Subclass
Defaults
Validate
ID & url
fetch & save

View Slide

Separation data/functionality
Tie data related functions related together with the data
No polling, get alerted on changes (events)
Easy communication with server

View Slide

n
e
w B
a
c
k
b
o
n
e
.
C
o
l
l
e
c
t
i
o
n
(
)

View Slide

View Slide

Collections are ordered sets of models.
backbonejs.org/#Collection

View Slide

Users
Latest articles
Articles promoted to frontpage
All pages
All nodes

View Slide

Controls on a slideshow
Main menu links
Pager in search results

View Slide

View Slide

v
a
r C
o
w
o
r
k
e
r
s = B
a
c
k
b
o
n
e
.
C
o
l
l
e
c
t
i
o
n
.
e
x
t
e
n
d
(
{
m
o
d
e
l
: P
e
r
s
o
n
}
)
;

View Slide

v
a
r s
o
u
r
c
e = [
{
n
a
m
e
: "
T
o
o
n K
e
t
e
l
s
"
,
a
g
e
: 3
0
,
j
o
b
: "
D
e
v
e
l
o
p
e
r
"
,
b
i
o
: "

S
c
r
u
m m
a
s
t
e
r
, b
a
c
k
e
n
d D
r
u
p
a
l d
e
v
e
l
o
p
e
r
.

"
,
u
i
d
: 7
5
4
4
,
i
d
: '
t
k
-
7
5
4
4
-
c
o
r
l
'
}
,
{
n
a
m
e
: "
A
n K
a
t
r
i
e
n
"
,
a
g
e
: 2
3
,
c
o
u
n
t
r
y
: "
t
h
e N
e
t
h
e
r
l
a
n
d
s
"
,
b
i
o
: "

W
o
r
k
s i
n G
e
r
m
a
n
y
. L
o
v
e
s t
o g
a
m
b
l
e
.

"
,
u
i
d
: 3
4
0
0
,
i
d
: '
a
k
-
3
4
0
0
-
c
o
r
l
'
}
,

View Slide

v
a
r c
o
w
o
r
k
e
r
s = n
e
w C
o
w
o
r
k
e
r
s
(
s
o
u
r
c
e
)
;

View Slide

{
_
b
y
I
d
: O
b
j
e
c
t
,
l
e
n
g
t
h
: 3
,
m
o
d
e
l
s
: A
r
r
a
y
[
3
]
}

View Slide

View Slide

c
o
w
o
r
k
e
r
s
.
a
t
(
1
)
;
c
o
w
o
r
k
e
r
s
.
g
e
t
(
4
1
0
)
;
c
o
w
o
r
k
e
r
s
.
w
h
e
r
e
(
{
c
o
u
n
t
r
y
: "
t
h
e N
e
t
h
e
r
l
a
n
d
s
"
}
)
;

View Slide

View Slide

v
a
r s
o
m
e
o
n
e = c
o
w
o
r
k
e
r
s
.
a
t
(
1
)
;
c
o
w
o
r
k
e
r
s
.
r
e
m
o
v
e
(
s
o
m
e
o
n
e
)
;

View Slide

v
a
r n
o
o
b = n
e
w P
e
r
s
o
n
(
{
n
a
m
e
: "
D
r
i
e
s G
a
a
s
t
r
a
"
,
a
g
e
: 1
9
,
c
o
u
n
t
r
y
: "
t
h
e N
e
t
h
e
r
l
a
n
d
s
"
,
j
o
b
: "
T
h
e
m
e
r
"
,
b
i
o
: "

P
l
a
y
s w
i
t
h c
s
s a
n
d j
a
v
a
s
c
r
i
p
t a
l
l d
a
y l
o
n
g
.

"
,
u
i
d
: 9
0
1
6
,
i
d
: '
d
g
-
9
0
1
6
-
c
o
r
l
'
}
)
;
c
o
w
o
r
k
e
r
s
.
a
d
d
(
n
o
o
b
)
;

View Slide

v
a
r C
o
w
o
r
k
e
r
s = B
a
c
k
b
o
n
e
.
C
o
l
l
e
c
t
i
o
n
.
e
x
t
e
n
d
(
{
m
o
d
e
l
: P
e
r
s
o
n
,
c
o
m
p
a
r
a
t
o
r
: '
a
g
e
'
}
)
;

View Slide

c
o
w
o
r
k
e
r
s
.
c
o
m
p
a
r
a
t
o
r = f
u
n
c
t
i
o
n
(
m
o
d
e
l
) {
r
e
t
u
r
n m
o
d
e
l
.
g
e
t
(
'
n
a
m
e
'
)
;
}
c
o
w
o
r
k
e
r
s
.
s
o
r
t
(
)
;
c
o
w
o
r
k
e
r
s
.
c
o
m
p
a
r
a
t
o
r = '
c
o
u
n
t
r
y
'
;
c
o
w
o
r
k
e
r
s
.
s
o
r
t
(
)
;

View Slide

Hey, I've been sorted!

View Slide

c
o
w
o
r
k
e
r
s
.
o
n
(
'
s
o
r
t
'
, f
u
n
c
t
i
o
n
(
m
o
d
e
l
, v
a
l
u
e
) {
/
/ .
.
.
}
)
;

View Slide

c
o
w
o
r
k
e
r
s
.
o
n
(
'
c
h
a
n
g
e
:
a
g
e
'
, f
u
n
c
t
i
o
n
(
m
o
d
e
l
, v
a
l
u
e
) {
/
/ .
.
.
}
)
;

View Slide

c
o
w
o
r
k
e
r
s
.
o
n
(
'
a
l
l
'
, f
u
n
c
t
i
o
n
(
) {
c
o
n
s
o
l
e
.
l
o
g
(
'
e
v
e
n
t e
m
i
t
t
e
d
'
)
;
c
o
n
s
o
l
e
.
l
o
g
(
a
r
g
u
m
e
n
t
s
)
;
}
)
;

View Slide

v
a
r C
o
w
o
r
k
e
r
s = B
a
c
k
b
o
n
e
.
C
o
l
l
e
c
t
i
o
n
.
e
x
t
e
n
d
(
{
m
o
d
e
l
: P
e
r
s
o
n
,
u
r
l
: '
u
s
e
r
'
}
)
;
v
a
r c
o
w
o
r
k
e
r
s = n
e
w C
o
w
o
r
k
e
r
s
(
)
;
c
o
w
o
r
k
e
r
s
.
f
e
t
c
h
(
{
d
a
t
a
: {
p
a
g
e
: 1
}
}
)
;

View Slide

Create a collection
Get models
Add/remove models
Sort
Emit events
Fetch entire collection from server

View Slide

Organize sets of models into groups
Tie collection related functions together with the collection
Emit events and aggregate events of models. We no longer
need pointers to all the models
Easy communication with server

View Slide

n
e
w B
a
c
k
b
o
n
e
.
V
i
e
w
(
)

View Slide

View Slide

Views are objects which do two things: 1)
display data (most of the time models) and 2)
capture user interaction to trigger code.

View Slide

List of blogposts
A blogpost
A button to paginate

View Slide

View Slide

root DOM element node
v
a
r v
i
e
w = n
e
w B
a
c
k
b
o
n
e
.
V
i
e
w
( {
e
l
: $
(
'
#
m
a
i
n
'
) } )
;

View Slide

View Slide

v
a
r P
e
r
s
o
n
V
i
e
w = B
a
c
k
b
o
n
e
.
V
i
e
w
.
e
x
t
e
n
d
(
{
c
l
a
s
s
N
a
m
e
: '
p
e
r
s
o
n
-
v
i
e
w
'
,
}
)
;
v
a
r v
i
e
w = n
e
w P
e
r
s
o
n
V
i
e
w
(
)
;

View Slide

The view is just an empty div.

View Slide

v
a
r P
e
r
s
o
n
V
i
e
w = B
a
c
k
b
o
n
e
.
V
i
e
w
.
e
x
t
e
n
d
(
{
c
l
a
s
s
N
a
m
e
: '
p
e
r
s
o
n
-
v
i
e
w
'
,
r
e
n
d
e
r
: f
u
n
c
t
i
o
n
(
) {
t
h
i
s
.
$
e
l
.
h
t
m
l
( '
<
h
2
>
T
o
o
n K
e
t
e
l
s
<
/
h
2
>
' )
;
r
e
t
u
r
n t
h
i
s
;
}
}
)
;

View Slide

A.K.A. How to insert it into the DOM?

View Slide

v
a
r v
i
e
w = n
e
w P
e
r
s
o
n
V
i
e
w
(
)
;
$
(
'
#
m
a
i
n
'
)
.
a
p
p
e
n
d
( v
i
e
w
.
r
e
n
d
e
r
(
)
.
e
l )
;

View Slide

Not the same old string every time again...

View Slide

v
a
r t
o
o
n = n
e
w P
e
r
s
o
n
(
{
n
a
m
e
: "
T
o
o
n K
e
t
e
l
s
"
,
a
g
e
: 3
0
,
j
o
b
: "
D
e
v
e
l
o
p
e
r
"
,
b
i
o
: "

S
c
r
u
m m
a
s
t
e
r
, b
a
c
k
e
n
d D
r
u
p
a
l d
e
v
e
l
o
p
e
r
.

"
,
u
i
d
: 7
5
4
4
,
i
d
: '
t
k
-
7
5
4
4
-
c
o
r
l
'
}
)
;
v
a
r v
i
e
w = n
e
w P
e
r
s
o
n
V
i
e
w
( {
m
o
d
e
l
: t
o
o
n
} )
;

View Slide

v
a
r P
e
r
s
o
n
V
i
e
w = B
a
c
k
b
o
n
e
.
V
i
e
w
.
e
x
t
e
n
d
(
{
'
c
l
a
s
s
N
a
m
e
'
: '
p
e
r
s
o
n
-
v
i
e
w
'
,
r
e
n
d
e
r
: f
u
n
c
t
i
o
n
(
) {
v
a
r c
o
n
t
e
n
t = '
<
h
2
>
'
+
t
h
i
s
.
m
o
d
e
l
.
g
e
t
(
'
n
a
m
e
'
)
+
'
<
/
h
2
>
'
;
t
h
i
s
.
$
e
l
.
h
t
m
l
(
c
o
n
t
e
n
t
)
;
r
e
t
u
r
n t
h
i
s
;
}
}
)
;

View Slide

The model has changed, the view not.

View Slide

v
a
r P
e
r
s
o
n
v
i
e
w = B
a
c
k
b
o
n
e
.
V
i
e
w
.
e
x
t
e
n
d
(
{
'
c
l
a
s
s
N
a
m
e
'
: '
p
e
r
s
o
n
-
v
i
e
w
'
,
i
n
i
t
i
a
l
i
z
e
: f
u
n
c
t
i
o
n
(
) {
t
h
i
s
.
m
o
d
e
l
.
o
n
(
'
c
h
a
n
g
e
'
, t
h
i
s
.
r
e
n
d
e
r
)
;
}
,
r
e
n
d
e
r
: f
u
n
c
t
i
o
n
(
) {
v
a
r c
o
n
t
e
n
t = '
<
h
2
>
'
+
t
h
i
s
.
m
o
d
e
l
.
g
e
t
(
'
n
a
m
e
'
)
+
'
<
/
h
2
>
'
;
t
h
i
s
.
$
e
l
.
h
t
m
l
(
c
o
n
t
e
n
t
)
;
r
e
t
u
r
n t
h
i
s
;
}
}
)
;

View Slide

t
h
i
s
.
m
o
d
e
l
.
o
n
(
'
c
h
a
n
g
e
'
, t
h
i
s
.
r
e
n
d
e
r
)
;
t
h
i
s
.
l
i
s
t
e
n
T
o
(
t
h
i
s
.
m
o
d
e
l
, '
c
h
a
n
g
e
'
, t
h
i
s
.
r
e
n
d
e
r
)
;

View Slide

My eyes hurt, it's ugly!

View Slide

_
.
t
e
m
p
l
a
t
e
(
)

View Slide

<
s
c
r
i
p
t t
y
p
e
=
"
t
e
x
t
/
t
e
m
p
l
a
t
e
" i
d
=
"
p
e
r
s
o
n
-
v
i
e
w
"
>
<
/
s
c
r
i
p
t
>
<
h
2
>
<
%
= n
a
m
e %
>
<
/
h
2
>

<
s
p
a
n c
l
a
s
s
=
"
j
o
b
"
>
<
%
= j
o
b %
>
<
/
s
p
a
n
> | <
s
p
a
n c
l
a
s
s
=
"
c
o
u
n
t
r
y
"
<
d
i
v c
l
a
s
s
=
"
c
o
n
t
r
o
l
s
"
> <
s
p
a
n c
l
a
s
s
=
'
m
o
r
e
'
>
M
o
r
e
<
/
s
p
a
n
>
<
s
p
a
n c
l
a
s
s
<
d
i
v c
l
a
s
s
=
"
b
i
o h
i
d
e
"
>
<
%
= b
i
o %
>
<
/
d
i
v
>

View Slide

v
a
r P
e
r
s
o
n
v
i
e
w = B
a
c
k
b
o
n
e
.
V
i
e
w
.
e
x
t
e
n
d
(
{
'
c
l
a
s
s
N
a
m
e
'
: '
p
e
r
s
o
n
-
v
i
e
w
'
,
i
n
i
t
i
a
l
i
z
e
: f
u
n
c
t
i
o
n
(
) {
t
h
i
s
.
l
i
s
t
e
n
T
o
(
t
h
i
s
.
m
o
d
e
l
, '
c
h
a
n
g
e
'
, t
h
i
s
.
r
e
n
d
e
r
)
;
}
,
t
e
m
p
l
a
t
e
: _
.
t
e
m
p
l
a
t
e
( $
(
'
#
p
e
r
s
o
n
-
v
i
e
w
'
)
.
h
t
m
l
(
) )
,
r
e
n
d
e
r
: f
u
n
c
t
i
o
n
(
) {
v
a
r c
o
n
t
e
n
t = t
h
i
s
.
t
e
m
p
l
a
t
e
( t
h
i
s
.
m
o
d
e
l
.
t
o
J
S
O
N
(
) )
;
t
h
i
s
.
$
e
l
.
h
t
m
l
(
c
o
n
t
e
n
t
)
;
r
e
t
u
r
n t
h
i
s
;
}
}
)
;

View Slide

t
e
m
p
l
a
t
e
: _
.
t
e
m
p
l
a
t
e
( $
(
'
#
p
e
r
s
o
n
-
v
i
e
w
'
)
.
h
t
m
l
(
) )
,
v
a
r c
o
n
t
e
n
t = t
h
i
s
.
t
e
m
p
l
a
t
e
( t
h
i
s
.
m
o
d
e
l
.
t
o
J
S
O
N
(
) )
;

View Slide

Views are also about capturing user intent,
aren't they?

View Slide

e
v
e
n
t
s

View Slide

v
a
r P
e
r
s
o
n
V
i
e
w = B
a
c
k
b
o
n
e
.
V
i
e
w
.
e
x
t
e
n
d
(
{
/
/ .
.
.
e
v
e
n
t
s
: {
'
c
l
i
c
k .
m
o
r
e
'
: '
s
h
o
w
M
o
r
e
'
,
'
c
l
i
c
k .
l
e
s
s
'
: '
s
h
o
w
L
e
s
s
'
,
'
c
l
i
c
k h
2
'
: '
g
o
T
o
D
e
t
a
i
l
'
,
'
m
o
u
s
e
o
v
e
r
'
: '
s
t
a
r
t
H
i
g
h
l
i
g
h
t
'
,
'
m
o
u
s
e
o
u
t
'
: '
s
t
o
p
H
i
g
h
l
i
g
h
t
'
}
,
s
h
o
w
M
o
r
e
: f
u
n
c
t
i
o
n
(
e
v
e
n
t
) {
/
/ .
.
.
}
,
s
h
o
w
L
e
s
s
: f
u
n
c
t
i
o
n
(
e
v
e
n
t
) {

View Slide

Person is selected. Selected is a "state", no?

View Slide

v
a
r P
e
r
s
o
n
V
i
e
w = B
a
c
k
b
o
n
e
.
V
i
e
w
.
e
x
t
e
n
d
(
{
/
/ .
.
.
e
v
e
n
t
s
: {
'
c
l
i
c
k h
2
'
: '
s
e
l
e
c
t
P
e
r
s
o
n
'
,
/
/ .
.
.
}
,
s
e
l
e
c
t
P
e
r
s
o
n
: f
u
n
c
t
i
o
n
(
e
v
e
n
t
) {
i
f (
t
h
i
s
.
m
o
d
e
l
.
g
e
t
(
'
s
e
l
e
c
t
e
d
'
)
) {
t
h
i
s
.
m
o
d
e
l
.
s
e
t
(
'
s
e
l
e
c
t
e
d
'
, f
a
l
s
e
)
;
} e
l
s
e {
t
h
i
s
.
m
o
d
e
l
.
s
e
t
(
'
s
e
l
e
c
t
e
d
'
, t
r
u
e
)
;
}
}
,

View Slide

Going back and forth

View Slide

User clicks `h2` title
View calls `selectPerson`
Function will toggle the `selected` attribute of the model
Model emits `change` event
Since the view's render function is tied to this event,
`render` get's called
Render takes the model's attributes (some of them were
just updated) and displays itself with the updated values.

View Slide

What you get when data and representation
are separate...

View Slide

<
s
c
r
i
p
t t
y
p
e
=
"
t
e
x
t
/
t
e
m
p
l
a
t
e
" i
d
=
"
l
i
s
t
-
v
i
e
w
"
>
<
/
s
c
r
i
p
t
>
<
t
d
>
<
%
- t
i
t
l
e %
>
<
t
d
>
<
t
d
>
<
s
p
a
n c
l
a
s
s
=
"
l
a
b
e
l l
a
b
e
l
-
i
n
f
o
" <
%
- s
e
l
e
c
t
e
d %
> <
/
s
p
a
n
>
<
/
t
d

View Slide

v
a
r T
a
b
l
e
R
o
w
V
i
e
w = B
a
c
k
b
o
n
e
.
V
i
e
w
.
e
x
t
e
n
d
(
{
t
a
g
N
a
m
e
: '
t
r
'
,
i
n
i
t
i
a
l
i
z
e
: f
u
n
c
t
i
o
n
(
) {
t
h
i
s
.
l
i
s
t
e
n
T
o
(
t
h
i
s
.
m
o
d
e
l
, '
c
h
a
n
g
e
:
s
e
l
e
c
t
e
d
'
, t
h
i
s
.
r
e
n
d
e
r
)
;
t
h
i
s
.
l
i
s
t
e
n
T
o
(
t
h
i
s
.
m
o
d
e
l
, '
c
h
a
n
g
e
:
n
a
m
e
'
, t
h
i
s
.
r
e
n
d
e
r
)
;
}
,
t
e
m
p
l
a
t
e
: _
.
t
e
m
p
l
a
t
e
( $
(
'
#
t
a
b
l
e
-
r
o
w
-
v
i
e
w
'
)
.
h
t
m
l
(
) )
,
r
e
n
d
e
r
: f
u
n
c
t
i
o
n
(
) {
v
a
r c
o
n
t
e
n
t = {
s
e
l
e
c
t
e
d
: t
h
i
s
.
m
o
d
e
l
.
g
e
t
(
'
s
e
l
e
c
t
e
d
'
) ? '
s
e
l
e
c
t
e
d
' : '
'
,
t
i
t
l
e
: t
h
i
s
.
m
o
d
e
l
.
g
e
t
(
'
n
a
m
e
'
)
}
;
t
h
i
s
.
$
e
l
.
h
t
m
l
( t
h
i
s
.
t
e
m
p
l
a
t
e
( c
o
n
t
e
n
t ) )
;

View Slide

1. one model, two views
2. view updates itself
3. a different view updates the model

View Slide

Create a view
Set its contents
Insert it into the DOM
Pass models so the content is dynamic
Auto update its display when model changes
Use templates
Catch user interaction with "events" property

View Slide

All user interaction goes via Views, in its events hash
Separate data (model) from display (view) allows us to have
multiple displays
Templates keep the views code tidy
By binding to model change event, the view automatically
gets updated.

View Slide

By binding to model change event, a view
automatically gets updated.
A view does not care who updates the model
or how.
One view can update the display of another
view via a model, without even knowing it.

View Slide

View Slide

Models
Collections
Views

View Slide

View Slide

By binding to model change event, the view
automatically gets updated. The view does
not care who updates the model or how.

View Slide

View Slide

A view binds to the collections change event
to automatically updated itself.
A view does not care who updates the
collection or how.
One view can update the display of another
view via a collection, without even knowing it.

View Slide

View Slide

Introducing Backbone.js

Introducing Backbone.js

Toon Ketels

More Decks by Toon Ketels

Other Decks in Programming

Featured

Transcript