SlideShare a Scribd company logo

Backbone.js

OpenFest team, profile picture
OpenFest team

The document contains a presentation by Radoslav Stankov at OpenFest on November 5, 2011 about Backbone.js. It introduces key concepts of Backbone.js including Models, Views, and how they work together. It provides code examples of creating Models with attributes and events, creating Views with DOM elements, and binding View methods to DOM events.

Technology
1 of 166
Downloaded 66 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
Радослав Станков OpenFest 05/11/2011 Tuesday, November 8, 11
Кой съм аз? @rstankov http://rstankov.com http://github.com/rstankov Tuesday, November 8, 11
Tuesday, November 8, 11
Tuesday, November 8, 11
Tuesday, November 8, 11
Tuesday, November 8, 11
Tuesday, November 8, 11
Tuesday, November 8, 11
Tuesday, November 8, 11
Tuesday, November 8, 11
Tuesday, November 8, 11
Tuesday, November 8, 11
Tuesday, November 8, 11
Tuesday, November 8, 11
Browser Controller Model View Сървър Tuesday, November 8, 11
Browser Controller Model View Сървър Tuesday, November 8, 11
Browser Controller Model View Сървър Tuesday, November 8, 11
Browser Controller Model View Сървър Tuesday, November 8, 11
Browser Controller Model View Сървър Tuesday, November 8, 11
Browser Controller Model View Сървър Tuesday, November 8, 11
Browser Controller Model View Сървър Tuesday, November 8, 11
Browser Controller Model View Сървър Tuesday, November 8, 11
Browser Controller Model View Сървър Tuesday, November 8, 11
Browser Controller Model View Сървър Tuesday, November 8, 11
Browser Controller Model View Сървър Tuesday, November 8, 11
Browser Controller Model View Сървър Tuesday, November 8, 11
Browser Controller Model View Сървър Tuesday, November 8, 11
Browser Dom View Model Tuesday, November 8, 11
Browser Dom View Model Tuesday, November 8, 11
Browser Dom View Model Tuesday, November 8, 11
Browser Dom View Model Tuesday, November 8, 11
Browser Dom View Model Tuesday, November 8, 11
Browser Dom View Model Tuesday, November 8, 11
Browser Dom View Model Tuesday, November 8, 11
Browser Dom View Model Tuesday, November 8, 11
Browser Dom View Model Tuesday, November 8, 11
Backbone.Events Tuesday, November 8, 11
var object = {}; $.extend(object, Backbone.Events); object.bind('eventName', function() { console.log('1'); }); object.bind('eventName', function() { console.log('2'); }); object.trigger('eventName'); // prints '1' and '2' Tuesday, November 8, 11
var object = {}; $.extend(object, Backbone.Events); object.bind('eventName', function() { console.log('1'); }); object.bind('eventName', function() { console.log('2'); }); object.trigger('eventName'); // prints '1' and '2' Tuesday, November 8, 11
var object = {}; $.extend(object, Backbone.Events); object.bind('eventName', function() { console.log('1'); }); object.bind('eventName', function() { console.log('2'); }); object.trigger('eventName'); // prints '1' and '2' Tuesday, November 8, 11
var object = {}; $.extend(object, Backbone.Events); object.bind('eventName', function() { console.log('1'); }); object.bind('eventName', function() { console.log('2'); }); object.trigger('eventName'); // prints '1' and '2' Tuesday, November 8, 11
var object = {}; $.extend(object, Backbone.Events); object.bind('eventName', function() { console.log('1'); }); object.bind('eventName', function() { console.log('2'); }); object.trigger('eventName'); // prints '1' and '2' Tuesday, November 8, 11
Backbone.Model Tuesday, November 8, 11
var Person = Backbone.Model.extend({ initialize: function(){ console.log("I'm alive!"); } }); new Person(); Tuesday, November 8, 11
var Person = Backbone.Model.extend({ initialize: function(){ console.log("I'm alive!"); } }); new Person(); Tuesday, November 8, 11
var Person = Backbone.Model.extend({ initialize: function(){ console.log("I'm alive!"); } }); new Person(); Tuesday, November 8, 11
var Person = Backbone.Model.extend({}); var me = new Person({name: 'Radoslav'}); me.get('name'); // Radoslav me.set({lastName: 'Stankov'}); me.get('lastName'); // Stankov Tuesday, November 8, 11
var Person = Backbone.Model.extend({}); var me = new Person({name: 'Radoslav'}); me.get('name'); // Radoslav me.set({lastName: 'Stankov'}); me.get('lastName'); // Stankov Tuesday, November 8, 11
var Person = Backbone.Model.extend({}); var me = new Person({name: 'Radoslav'}); me.get('name'); // Radoslav me.set({lastName: 'Stankov'}); me.get('lastName'); // Stankov Tuesday, November 8, 11
var Person = Backbone.Model.extend({}); var me = new Person({name: 'Radoslav'}); me.get('name'); // Radoslav me.set({lastName: 'Stankov'}); me.get('lastName'); // Stankov Tuesday, November 8, 11
var Person = Backbone.Model.extend({}); var me = new Person({name: 'Radoslav'}); me.get('name'); // Radoslav me.set({lastName: 'Stankov'}); me.get('lastName'); // Stankov Tuesday, November 8, 11
var Person = Backbone.Model.extend({ defaults: { name: 'John', lastName: 'Doe', } }); var me = new Person(); me.get('name'); // John me.get('lastName'); // Doe Tuesday, November 8, 11
var Person = Backbone.Model.extend({ defaults: { name: 'John', lastName: 'Doe', } }); var me = new Person(); me.get('name'); // John me.get('lastName'); // Doe Tuesday, November 8, 11
var Person = Backbone.Model.extend({ defaults: { name: 'John', lastName: 'Doe', } }); var me = new Person(); me.get('name'); // John me.get('lastName'); // Doe Tuesday, November 8, 11
var Person = Backbone.Model.extend({ defaults: { name: 'John', lastName: 'Doe', } }); var me = new Person(); me.get('name'); // John me.get('lastName'); // Doe Tuesday, November 8, 11
var Calculator = Backbone.Model.extend({ defaults: { value: 0 }, value: function(){ return this.get('value'); }, sum: function(value){ this.set({value: value + this.get('value')}); }, reset: function(){ this.set({value: 0}); } }); Tuesday, November 8, 11
var Calculator = Backbone.Model.extend({ defaults: { value: 0 }, value: function(){ return this.get('value'); }, sum: function(value){ this.set({value: value + this.get('value')}); }, reset: function(){ this.set({value: 0}); } }); Tuesday, November 8, 11
var Calculator = Backbone.Model.extend({ defaults: { value: 0 }, value: function(){ return this.get('value'); }, sum: function(value){ this.set({value: value + this.get('value')}); }, reset: function(){ this.set({value: 0}); } }); Tuesday, November 8, 11
var Calculator = Backbone.Model.extend({ defaults: { value: 0 }, value: function(){ return this.get('value'); }, sum: function(value){ this.set({value: value + this.get('value')}); }, reset: function(){ this.set({value: 0}); } }); Tuesday, November 8, 11
var Calculator = Backbone.Model.extend({ defaults: { value: 0 }, value: function(){ return this.get('value'); }, sum: function(value){ this.set({value: value + this.get('value')}); }, reset: function(){ this.set({value: 0}); } }); Tuesday, November 8, 11
var cal = new Calculator(); cal.bind('change:value', function(model, value){ console.log(value); }); cal.bind('change', function(model){ console.log(model.get('value')); }); cal.bind('all', function(eventName) { console.log('I see every thing!', eventName); }); Tuesday, November 8, 11
var cal = new Calculator(); cal.bind('change:value', function(model, value){ console.log(value); }); cal.bind('change', function(model){ console.log(model.get('value')); }); cal.bind('all', function(eventName) { console.log('I see every thing!', eventName); }); Tuesday, November 8, 11
var cal = new Calculator(); cal.bind('change:value', function(model, value){ console.log(value); }); cal.bind('change', function(model){ console.log(model.get('value')); }); cal.bind('all', function(eventName) { console.log('I see every thing!', eventName); }); Tuesday, November 8, 11
var cal = new Calculator(); cal.bind('change:value', function(model, value){ console.log(value); }); cal.bind('change', function(model){ console.log(model.get('value')); }); cal.bind('all', function(eventName) { console.log('I see every thing!', eventName); }); Tuesday, November 8, 11
var cal = new Calculator(); cal.bind('myEvent', function(){ console.log('KaBoom....'); }); cal.trigger('myEvent'); Tuesday, November 8, 11
var Product = Backbone.Model.extend({ urlRoot: '/products' }); var chair = new Product({ name: 'chair', price: 10 }); chair.save(); // POST /products Tuesday, November 8, 11
var Product = Backbone.Model.extend({ url: function(){ return '/products/' + (this.isNew() ? '' : this.id); } }); var chair = new Product({ id: 5, name: 'chair', price: 10 }); chair.save(); // PUT /products/1 Tuesday, November 8, 11
http://documentcloud.github.com/backbone/#Model-save Tuesday, November 8, 11
И още... • validate • escape • has • unset • clear • hasChanged • changedAttributes • previousAttributes • fetch • toJSON • clone Tuesday, November 8, 11
Backbone.View Tuesday, November 8, 11
Tuesday, November 8, 11
var UserNameView = Backbone.View.extend({ tagName: 'input', className: 'string optional', id: 'user-name', attributes: { type: 'string', name: 'user[name]' } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional"> Tuesday, November 8, 11
var UserNameView = Backbone.View.extend({ tagName: 'input', className: 'string optional', id: 'user-name', attributes: { type: 'string', name: 'user[name]' } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional"> Tuesday, November 8, 11
var UserNameView = Backbone.View.extend({ tagName: 'input', className: 'string optional', id: 'user-name', attributes: { type: 'string', name: 'user[name]' } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional"> Tuesday, November 8, 11
var UserNameView = Backbone.View.extend({ tagName: 'input', className: 'string optional', id: 'user-name', attributes: { type: 'string', name: 'user[name]' } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional"> Tuesday, November 8, 11
var UserNameView = Backbone.View.extend({ tagName: 'input', className: 'string optional', id: 'user-name', attributes: { type: 'string', name: 'user[name]' } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional"> Tuesday, November 8, 11
var UserNameView = Backbone.View.extend({ tagName: 'input', className: 'string optional', id: 'user-name', attributes: { type: 'string', name: 'user[name]' } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional"> Tuesday, November 8, 11
var UserNameView = Backbone.View.extend({ tagName: 'input', className: 'string optional', id: 'user-name', attributes: { type: 'string', name: 'user[name]' } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional"> Tuesday, November 8, 11
var UsersListView = Backbone.View.extend({ el: '#users-list' }); var userList = new UsersListView(); console.log(userList.el); Tuesday, November 8, 11
var EditBoxView = Backbone.View.extend({}); var element = $('#edit-box-view').get(0), editBox = new EditBoxView({el: element}); console.log(editBox.el === element); Tuesday, November 8, 11
var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} }); Tuesday, November 8, 11
var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} }); Tuesday, November 8, 11
var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} }); Tuesday, November 8, 11
var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} }); Tuesday, November 8, 11
var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} }); Tuesday, November 8, 11
var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} }); Tuesday, November 8, 11
var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} }); Tuesday, November 8, 11
<script type="text/template" id="news"> <h1><%= title %></h1> <time><%= created_at %></time> <p><%= text %></p> </script> Tuesday, November 8, 11
var NewsView = Backbone.View.extend({ template: _.template($('#news').html()), render: function() { this.el.innerHTML = this.template(this.model); return this; } }); Tuesday, November 8, 11
var view = new NewsView({ model: { title: "News Title", created_at: "Today", text: "Long text" } }); document.body.appendChild(view.render().el); Tuesday, November 8, 11
<script type="text/template" id="news"> <h1><%= title %></h1> <time><%= created_at %></time> <p><%= text %></p> </script> Tuesday, November 8, 11
<div> <h1>News Title</h1> <time>Today</time> <p>Long text</p> </div> Tuesday, November 8, 11
View Model DOM Tuesday, November 8, 11
View Model DOM Tuesday, November 8, 11
View Model DOM Tuesday, November 8, 11
View Model DOM Tuesday, November 8, 11
View Model DOM Tuesday, November 8, 11
View Model DOM Tuesday, November 8, 11
View Model DOM Tuesday, November 8, 11
View Model DOM Tuesday, November 8, 11
View Model DOM Tuesday, November 8, 11
View Model DOM Tuesday, November 8, 11
View Model DOM View 2 Tuesday, November 8, 11
View Model DOM View 2 Tuesday, November 8, 11
View Model DOM View 2 Tuesday, November 8, 11
View Model DOM View 2 Tuesday, November 8, 11
View Model DOM View 2 Tuesday, November 8, 11
View Model DOM View 2 Tuesday, November 8, 11
View Model DOM View 2 Tuesday, November 8, 11
View Model DOM View 2 Tuesday, November 8, 11
View Model DOM View 2 Tuesday, November 8, 11
View Model DOM View 2 Tuesday, November 8, 11
View View 2 Model DOM Tuesday, November 8, 11
View View 2 Model DOM View 3 Tuesday, November 8, 11
View View 2 Model DOM View 3 View 4 Tuesday, November 8, 11
View View 2 Model DOM View 3 View 4 View .. N Tuesday, November 8, 11
View View 2 Model DOM View 3 View 4 View .. N Tuesday, November 8, 11
View View 2 Model DOM View 3 View 4 View .. N Tuesday, November 8, 11
View View 2 Model DOM View 3 View 4 View .. N Tuesday, November 8, 11
View View 2 Model DOM View 3 View 4 View .. N Tuesday, November 8, 11
View View 2 Model DOM View 3 View 4 View .. N Tuesday, November 8, 11
View View 2 Model DOM View 3 View 4 View .. N Tuesday, November 8, 11
View View 2 Model DOM View 3 View 4 View .. N Tuesday, November 8, 11
View View 2 Model DOM View 3 View 4 View .. N Tuesday, November 8, 11
Demo Tuesday, November 8, 11
var Calculator = Backbone.Model.extend({ defaults: { value: 0 }, increment: function() { this.set({'value': this.get('value') + 1}); }, decrement: function() { this.set({'value': this.get('value') - 1}); }, getValue: function() { return this.get('value'); } }); Tuesday, November 8, 11
var ButtonsView = Backbone.View.extend({ events: { 'click .plus': 'plus', 'click .minus': 'minus' }, plus: function() { this.model.increment(); }, minus: function() { this.model.decrement(); } }); Tuesday, November 8, 11
var DisplayView = Backbone.View.extend({ initialize: function() { this.model.bind('change:value', this.render, this); this.render(); }, render: function() { this.el.innerHTML = this.model.getValue(); return this; } }); Tuesday, November 8, 11
var cal = new Calculator(); new ButtonsView({model: cal, el: '.buttons'}); new DisplayView({model: cal, el: '.display'}); Tuesday, November 8, 11
Backbone.Collection Tuesday, November 8, 11
var ProductsCollection = Backbone.Collection.extend({ model: Product }); var products = new ProductsCollection(); products.fetch(); products.bind('reset', function(list) { console.log('Loaded', list.length, 'records'); }); Tuesday, November 8, 11
products.bind('add', function(model) { console.log('new product added'); }); products.bind('remove', function(model) { console.log('item product removed'); }); Tuesday, November 8, 11
И още... • Underscore Methods • add / remove / at • sort / comparator • reset • create • url • toJSON Tuesday, November 8, 11
Backbone.Router Tuesday, November 8, 11
Tuesday, November 8, 11
var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start(); Tuesday, November 8, 11
var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start(); Tuesday, November 8, 11
var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start(); Tuesday, November 8, 11
var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start(); Tuesday, November 8, 11
var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start(); Tuesday, November 8, 11
var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start(); Tuesday, November 8, 11
var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start(); Tuesday, November 8, 11
var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start(); Tuesday, November 8, 11
var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start(); Tuesday, November 8, 11
var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start(); Tuesday, November 8, 11
var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start(); Tuesday, November 8, 11
app.navigate('pages', true); app.navigate('pages/search/title', true); app.navigate('pages/3', true); Tuesday, November 8, 11
site.com/path#pages site.com/path#pages/search/title site.com/path#pages/3 Tuesday, November 8, 11
Tuesday, November 8, 11
Backbone.history.start({pushState: true}); Tuesday, November 8, 11
site.com/path#pages site.com/path#pages/search/title site.com/path#pages/3 Tuesday, November 8, 11
site.com/path/pages site.com/path/pages/search/title site.com/path/pages/3 Tuesday, November 8, 11
Tuesday, November 8, 11
Tuesday, November 8, 11
Tuesday, November 8, 11
Tuesday, November 8, 11
Tuesday, November 8, 11
Tuesday, November 8, 11
Tuesday, November 8, 11
Недостатъци Tuesday, November 8, 11
Алтернативи Tuesday, November 8, 11
Алтернативи Tuesday, November 8, 11
Алтернативи Tuesday, November 8, 11
Алтернативи Tuesday, November 8, 11
Въпроси? Tuesday, November 8, 11
Благодаря за вниманието @rstankov Tuesday, November 8, 11

More Related Content

PDF
De vuelta al pasado con SQL y stored procedures
Norman Clarke
 
PPTX
Critical evaluation of a master’s thesis
Jane Charity Estrada-Madronero
 
PDF
Mobilys - Mobile Apps Development
Julia Stolyarova
 
DOCX
8 instrumento autoeficacia grupo 8
Luis Aracas
 
PDF
Progetto mamma si (1)
Rete di Solidarietà - Siena, Italy
 
PDF
SharePoint TechCon 2009 - 803
Andreas Grabner
 
PPTX
Bincangkan jurang pencapaian matematik murid sekolah rendah atau sekolah mene...
Ñûrãzwã Šãlěh
 
PDF
Β' ΤΑΞΗ ΥΛΗ ΕΞΕΤΑΣΕΩΝ 2016
Katerina Arabatzi
 
De vuelta al pasado con SQL y stored procedures
Norman Clarke
 
Critical evaluation of a master’s thesis
Jane Charity Estrada-Madronero
 
Mobilys - Mobile Apps Development
Julia Stolyarova
 
8 instrumento autoeficacia grupo 8
Luis Aracas
 
Progetto mamma si (1)
Rete di Solidarietà - Siena, Italy
 
SharePoint TechCon 2009 - 803
Andreas Grabner
 
Bincangkan jurang pencapaian matematik murid sekolah rendah atau sekolah mene...
Ñûrãzwã Šãlěh
 
Β' ΤΑΞΗ ΥΛΗ ΕΞΕΤΑΣΕΩΝ 2016
Katerina Arabatzi
 

Viewers also liked (17)

PPTX
KEPERCAYAAN GURU
Ñûrãzwã Šãlěh
 
PDF
Tsahim 4
mongoo_8301
 
PPTX
Opportunity Execution Project - Career Mentor Online
Charles Sun
 
PDF
Hum2310 sm2015 proust questionnaire
ProfWillAdams
 
PDF
フラグ色々&その遅延評価-仮想機械インタープリタ書きのための-
たけおか しょうぞう
 
PPTX
KTI Perkembangan Smartphone di Jember
21 Memento
 
PDF
상상지니릴레이
HaNee Seo
 
PDF
2006 Winter Newsletter
Direct Relief
 
PDF
2001 annual report
Direct Relief
 
PDF
Arh2050 1730 syllabus
ProfWillAdams
 
PDF
Java Tech & Tools | Big Blobs: Moving Big Data In and Out of the Cloud | Adri...
JAX London
 
PDF
Hum2220 sm2015 syllabus
ProfWillAdams
 
PDF
Errol morris essay
pkirk63
 
PPTX
квест Pons 1
MarkovDA
 
PPTX
Loopbaanbeleid
Augustus consultancy
 
PPS
Noooo
Zoroastro01
 
PPTX
(R)evolutionize APM
Andreas Grabner
 
KEPERCAYAAN GURU
Ñûrãzwã Šãlěh
 
Tsahim 4
mongoo_8301
 
Opportunity Execution Project - Career Mentor Online
Charles Sun
 
Hum2310 sm2015 proust questionnaire
ProfWillAdams
 
フラグ色々&その遅延評価-仮想機械インタープリタ書きのための-
たけおか しょうぞう
 
KTI Perkembangan Smartphone di Jember
21 Memento
 
상상지니릴레이
HaNee Seo
 
2006 Winter Newsletter
Direct Relief
 
2001 annual report
Direct Relief
 
Arh2050 1730 syllabus
ProfWillAdams
 
Java Tech & Tools | Big Blobs: Moving Big Data In and Out of the Cloud | Adri...
JAX London
 
Hum2220 sm2015 syllabus
ProfWillAdams
 
Errol morris essay
pkirk63
 
квест Pons 1
MarkovDA
 
Loopbaanbeleid
Augustus consultancy
 
Noooo
Zoroastro01
 
(R)evolutionize APM
Andreas Grabner
 
Ad

More from OpenFest team (20)

PDF
Understanding your memory usage under Linux
OpenFest team
 
PDF
Embedding FreeBSD: for large and small beds
OpenFest team
 
PDF
Why you can charge for open source software
OpenFest team
 
PDF
Microinvest Warehouse Open
OpenFest team
 
PDF
Как да правим по-добър бизнес с услуги около софтуера с отворен код
OpenFest team
 
PDF
Pf sense 2.0
OpenFest team
 
PDF
Електронни пари: Пътят до BitCoin и поглед напред
OpenFest team
 
PDF
Node.social
OpenFest team
 
PDF
Виртуализирано видеонаблюдение под FreeBSD
OpenFest team
 
PDF
RFID технологии и проблеми със сигурността им
OpenFest team
 
PDF
Redis the better NoSQL
OpenFest team
 
PDF
initLab
OpenFest team
 
PDF
Свободни PLC
OpenFest team
 
PDF
Distributed WPA PSK security audit
OpenFest team
 
PDF
Aesaes
OpenFest team
 
PDF
Why kernelspace sucks?
OpenFest team
 
PDF
Направи си сам суперкомпютър
OpenFest team
 
PDF
Свободни курсове за обучение
OpenFest team
 
PDF
Using Open Source technologies to create Enterprise Level Cloud System
OpenFest team
 
PDF
Emacs reborn
OpenFest team
 
Understanding your memory usage under Linux
OpenFest team
 
Embedding FreeBSD: for large and small beds
OpenFest team
 
Why you can charge for open source software
OpenFest team
 
Microinvest Warehouse Open
OpenFest team
 
Как да правим по-добър бизнес с услуги около софтуера с отворен код
OpenFest team
 
Pf sense 2.0
OpenFest team
 
Електронни пари: Пътят до BitCoin и поглед напред
OpenFest team
 
Node.social
OpenFest team
 
Виртуализирано видеонаблюдение под FreeBSD
OpenFest team
 
RFID технологии и проблеми със сигурността им
OpenFest team
 
Redis the better NoSQL
OpenFest team
 
initLab
OpenFest team
 
Свободни PLC
OpenFest team
 
Distributed WPA PSK security audit
OpenFest team
 
Aesaes
OpenFest team
 
Why kernelspace sucks?
OpenFest team
 
Направи си сам суперкомпютър
OpenFest team
 
Свободни курсове за обучение
OpenFest team
 
Using Open Source technologies to create Enterprise Level Cloud System
OpenFest team
 
Emacs reborn
OpenFest team
 
Ad

Recently uploaded (20)

PPTX
Big Data Technologies - Introduction.pptx
kuthubussaman1
 
PPT
Teaching material agriculture food technology
LiaRayya
 
DOCX
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
PPTX
Understanding_Digital_Forensics_Presentation.pptx
ImranKhan423233
 
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Safe Software
 
PDF
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Libreria ERP
 
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
muhammadmuneebnaeem7
 
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
SandeepSingh286037
 
PDF
Encapsulation_ Review paper, used for researhc scholars
gurumoop
 
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
IAESIJAI
 
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
David Malick Dieng
 
PDF
Unlocking AI with Model Context Protocol (MCP)
Brian McKeiver
 
PPTX
Spectroscopy.pptx food analysis technology
nawahassan45
 
PDF
Machine learning based COVID-19 study performance prediction
IAESIJAI
 
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
IAESIJAI
 
PPTX
Cloud computing and distributed systems.
kkkkkhan
 
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
blackmambaettijean
 
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
ZubinRadhakrishnan
 
PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Peter Tan
 
PDF
Encapsulation theory and applications.pdf
gurumoop
 
Big Data Technologies - Introduction.pptx
kuthubussaman1
 
Teaching material agriculture food technology
LiaRayya
 
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
Understanding_Digital_Forensics_Presentation.pptx
ImranKhan423233
 
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Safe Software
 
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Libreria ERP
 
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
muhammadmuneebnaeem7
 
Building Integrated photovoltaic BIPV_UPV.pdf
SandeepSingh286037
 
Encapsulation_ Review paper, used for researhc scholars
gurumoop
 
Per capita expenditure prediction using model stacking based on satellite ima...
IAESIJAI
 
Digital-Transformation-Roadmap-for-Companies.pptx
David Malick Dieng
 
Unlocking AI with Model Context Protocol (MCP)
Brian McKeiver
 
Spectroscopy.pptx food analysis technology
nawahassan45
 
Machine learning based COVID-19 study performance prediction
IAESIJAI
 
Diabetes mellitus diagnosis method based random forest with bat algorithm
IAESIJAI
 
Cloud computing and distributed systems.
kkkkkhan
 
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
blackmambaettijean
 
“AI and Expert System Decision Support & Business Intelligence Systems”
ZubinRadhakrishnan
 
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Peter Tan
 
Encapsulation theory and applications.pdf
gurumoop
 

Backbone.js

  • 1. Радослав Станков OpenFest 05/11/2011 Tuesday, November 8, 11
  • 2. Кой съм аз? @rstankov http://rstankov.com http://github.com/rstankov Tuesday, November 8, 11
  • 15. Browser Controller Model View Сървър Tuesday, November 8, 11
  • 16. Browser Controller Model View Сървър Tuesday, November 8, 11
  • 17. Browser Controller Model View Сървър Tuesday, November 8, 11
  • 18. Browser Controller Model View Сървър Tuesday, November 8, 11
  • 19. Browser Controller Model View Сървър Tuesday, November 8, 11
  • 20. Browser Controller Model View Сървър Tuesday, November 8, 11
  • 21. Browser Controller Model View Сървър Tuesday, November 8, 11
  • 22. Browser Controller Model View Сървър Tuesday, November 8, 11
  • 23. Browser Controller Model View Сървър Tuesday, November 8, 11
  • 24. Browser Controller Model View Сървър Tuesday, November 8, 11
  • 25. Browser Controller Model View Сървър Tuesday, November 8, 11
  • 26. Browser Controller Model View Сървър Tuesday, November 8, 11
  • 27. Browser Controller Model View Сървър Tuesday, November 8, 11
  • 28. Browser Dom View Model Tuesday, November 8, 11
  • 29. Browser Dom View Model Tuesday, November 8, 11
  • 30. Browser Dom View Model Tuesday, November 8, 11
  • 31. Browser Dom View Model Tuesday, November 8, 11
  • 32. Browser Dom View Model Tuesday, November 8, 11
  • 33. Browser Dom View Model Tuesday, November 8, 11
  • 34. Browser Dom View Model Tuesday, November 8, 11
  • 35. Browser Dom View Model Tuesday, November 8, 11
  • 36. Browser Dom View Model Tuesday, November 8, 11
  • 38. var object = {}; $.extend(object, Backbone.Events); object.bind('eventName', function() { console.log('1'); }); object.bind('eventName', function() { console.log('2'); }); object.trigger('eventName'); // prints '1' and '2' Tuesday, November 8, 11
  • 39. var object = {}; $.extend(object, Backbone.Events); object.bind('eventName', function() { console.log('1'); }); object.bind('eventName', function() { console.log('2'); }); object.trigger('eventName'); // prints '1' and '2' Tuesday, November 8, 11
  • 40. var object = {}; $.extend(object, Backbone.Events); object.bind('eventName', function() { console.log('1'); }); object.bind('eventName', function() { console.log('2'); }); object.trigger('eventName'); // prints '1' and '2' Tuesday, November 8, 11
  • 41. var object = {}; $.extend(object, Backbone.Events); object.bind('eventName', function() { console.log('1'); }); object.bind('eventName', function() { console.log('2'); }); object.trigger('eventName'); // prints '1' and '2' Tuesday, November 8, 11
  • 42. var object = {}; $.extend(object, Backbone.Events); object.bind('eventName', function() { console.log('1'); }); object.bind('eventName', function() { console.log('2'); }); object.trigger('eventName'); // prints '1' and '2' Tuesday, November 8, 11
  • 44. var Person = Backbone.Model.extend({ initialize: function(){ console.log("I'm alive!"); } }); new Person(); Tuesday, November 8, 11
  • 45. var Person = Backbone.Model.extend({ initialize: function(){ console.log("I'm alive!"); } }); new Person(); Tuesday, November 8, 11
  • 46. var Person = Backbone.Model.extend({ initialize: function(){ console.log("I'm alive!"); } }); new Person(); Tuesday, November 8, 11
  • 47. var Person = Backbone.Model.extend({}); var me = new Person({name: 'Radoslav'}); me.get('name'); // Radoslav me.set({lastName: 'Stankov'}); me.get('lastName'); // Stankov Tuesday, November 8, 11
  • 48. var Person = Backbone.Model.extend({}); var me = new Person({name: 'Radoslav'}); me.get('name'); // Radoslav me.set({lastName: 'Stankov'}); me.get('lastName'); // Stankov Tuesday, November 8, 11
  • 49. var Person = Backbone.Model.extend({}); var me = new Person({name: 'Radoslav'}); me.get('name'); // Radoslav me.set({lastName: 'Stankov'}); me.get('lastName'); // Stankov Tuesday, November 8, 11
  • 50. var Person = Backbone.Model.extend({}); var me = new Person({name: 'Radoslav'}); me.get('name'); // Radoslav me.set({lastName: 'Stankov'}); me.get('lastName'); // Stankov Tuesday, November 8, 11
  • 51. var Person = Backbone.Model.extend({}); var me = new Person({name: 'Radoslav'}); me.get('name'); // Radoslav me.set({lastName: 'Stankov'}); me.get('lastName'); // Stankov Tuesday, November 8, 11
  • 52. var Person = Backbone.Model.extend({ defaults: { name: 'John', lastName: 'Doe', } }); var me = new Person(); me.get('name'); // John me.get('lastName'); // Doe Tuesday, November 8, 11
  • 53. var Person = Backbone.Model.extend({ defaults: { name: 'John', lastName: 'Doe', } }); var me = new Person(); me.get('name'); // John me.get('lastName'); // Doe Tuesday, November 8, 11
  • 54. var Person = Backbone.Model.extend({ defaults: { name: 'John', lastName: 'Doe', } }); var me = new Person(); me.get('name'); // John me.get('lastName'); // Doe Tuesday, November 8, 11
  • 55. var Person = Backbone.Model.extend({ defaults: { name: 'John', lastName: 'Doe', } }); var me = new Person(); me.get('name'); // John me.get('lastName'); // Doe Tuesday, November 8, 11
  • 56. var Calculator = Backbone.Model.extend({ defaults: { value: 0 }, value: function(){ return this.get('value'); }, sum: function(value){ this.set({value: value + this.get('value')}); }, reset: function(){ this.set({value: 0}); } }); Tuesday, November 8, 11
  • 57. var Calculator = Backbone.Model.extend({ defaults: { value: 0 }, value: function(){ return this.get('value'); }, sum: function(value){ this.set({value: value + this.get('value')}); }, reset: function(){ this.set({value: 0}); } }); Tuesday, November 8, 11
  • 58. var Calculator = Backbone.Model.extend({ defaults: { value: 0 }, value: function(){ return this.get('value'); }, sum: function(value){ this.set({value: value + this.get('value')}); }, reset: function(){ this.set({value: 0}); } }); Tuesday, November 8, 11
  • 59. var Calculator = Backbone.Model.extend({ defaults: { value: 0 }, value: function(){ return this.get('value'); }, sum: function(value){ this.set({value: value + this.get('value')}); }, reset: function(){ this.set({value: 0}); } }); Tuesday, November 8, 11
  • 60. var Calculator = Backbone.Model.extend({ defaults: { value: 0 }, value: function(){ return this.get('value'); }, sum: function(value){ this.set({value: value + this.get('value')}); }, reset: function(){ this.set({value: 0}); } }); Tuesday, November 8, 11
  • 61. var cal = new Calculator(); cal.bind('change:value', function(model, value){ console.log(value); }); cal.bind('change', function(model){ console.log(model.get('value')); }); cal.bind('all', function(eventName) { console.log('I see every thing!', eventName); }); Tuesday, November 8, 11
  • 62. var cal = new Calculator(); cal.bind('change:value', function(model, value){ console.log(value); }); cal.bind('change', function(model){ console.log(model.get('value')); }); cal.bind('all', function(eventName) { console.log('I see every thing!', eventName); }); Tuesday, November 8, 11
  • 63. var cal = new Calculator(); cal.bind('change:value', function(model, value){ console.log(value); }); cal.bind('change', function(model){ console.log(model.get('value')); }); cal.bind('all', function(eventName) { console.log('I see every thing!', eventName); }); Tuesday, November 8, 11
  • 64. var cal = new Calculator(); cal.bind('change:value', function(model, value){ console.log(value); }); cal.bind('change', function(model){ console.log(model.get('value')); }); cal.bind('all', function(eventName) { console.log('I see every thing!', eventName); }); Tuesday, November 8, 11
  • 65. var cal = new Calculator(); cal.bind('myEvent', function(){ console.log('KaBoom....'); }); cal.trigger('myEvent'); Tuesday, November 8, 11
  • 66. var Product = Backbone.Model.extend({ urlRoot: '/products' }); var chair = new Product({ name: 'chair', price: 10 }); chair.save(); // POST /products Tuesday, November 8, 11
  • 67. var Product = Backbone.Model.extend({ url: function(){ return '/products/' + (this.isNew() ? '' : this.id); } }); var chair = new Product({ id: 5, name: 'chair', price: 10 }); chair.save(); // PUT /products/1 Tuesday, November 8, 11
  • 69. И още... • validate • escape • has • unset • clear • hasChanged • changedAttributes • previousAttributes • fetch • toJSON • clone Tuesday, November 8, 11
  • 72. var UserNameView = Backbone.View.extend({ tagName: 'input', className: 'string optional', id: 'user-name', attributes: { type: 'string', name: 'user[name]' } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional"> Tuesday, November 8, 11
  • 73. var UserNameView = Backbone.View.extend({ tagName: 'input', className: 'string optional', id: 'user-name', attributes: { type: 'string', name: 'user[name]' } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional"> Tuesday, November 8, 11
  • 74. var UserNameView = Backbone.View.extend({ tagName: 'input', className: 'string optional', id: 'user-name', attributes: { type: 'string', name: 'user[name]' } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional"> Tuesday, November 8, 11
  • 75. var UserNameView = Backbone.View.extend({ tagName: 'input', className: 'string optional', id: 'user-name', attributes: { type: 'string', name: 'user[name]' } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional"> Tuesday, November 8, 11
  • 76. var UserNameView = Backbone.View.extend({ tagName: 'input', className: 'string optional', id: 'user-name', attributes: { type: 'string', name: 'user[name]' } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional"> Tuesday, November 8, 11
  • 77. var UserNameView = Backbone.View.extend({ tagName: 'input', className: 'string optional', id: 'user-name', attributes: { type: 'string', name: 'user[name]' } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional"> Tuesday, November 8, 11
  • 78. var UserNameView = Backbone.View.extend({ tagName: 'input', className: 'string optional', id: 'user-name', attributes: { type: 'string', name: 'user[name]' } }); var userName = new UserNameView(); console.log(userName.el); <input type="string" name="user[name]" id="user-name" class="string optional"> Tuesday, November 8, 11
  • 79. var UsersListView = Backbone.View.extend({ el: '#users-list' }); var userList = new UsersListView(); console.log(userList.el); Tuesday, November 8, 11
  • 80. var EditBoxView = Backbone.View.extend({}); var element = $('#edit-box-view').get(0), editBox = new EditBoxView({el: element}); console.log(editBox.el === element); Tuesday, November 8, 11
  • 81. var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} }); Tuesday, November 8, 11
  • 82. var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} }); Tuesday, November 8, 11
  • 83. var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} }); Tuesday, November 8, 11
  • 84. var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} }); Tuesday, November 8, 11
  • 85. var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} }); Tuesday, November 8, 11
  • 86. var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} }); Tuesday, November 8, 11
  • 87. var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} }); Tuesday, November 8, 11
  • 88. <script type="text/template" id="news"> <h1><%= title %></h1> <time><%= created_at %></time> <p><%= text %></p> </script> Tuesday, November 8, 11
  • 89. var NewsView = Backbone.View.extend({ template: _.template($('#news').html()), render: function() { this.el.innerHTML = this.template(this.model); return this; } }); Tuesday, November 8, 11
  • 90. var view = new NewsView({ model: { title: "News Title", created_at: "Today", text: "Long text" } }); document.body.appendChild(view.render().el); Tuesday, November 8, 11
  • 91. <script type="text/template" id="news"> <h1><%= title %></h1> <time><%= created_at %></time> <p><%= text %></p> </script> Tuesday, November 8, 11
  • 92. <div> <h1>News Title</h1> <time>Today</time> <p>Long text</p> </div> Tuesday, November 8, 11
  • 93. View Model DOM Tuesday, November 8, 11
  • 94. View Model DOM Tuesday, November 8, 11
  • 95. View Model DOM Tuesday, November 8, 11
  • 96. View Model DOM Tuesday, November 8, 11
  • 97. View Model DOM Tuesday, November 8, 11
  • 98. View Model DOM Tuesday, November 8, 11
  • 99. View Model DOM Tuesday, November 8, 11
  • 100. View Model DOM Tuesday, November 8, 11
  • 101. View Model DOM Tuesday, November 8, 11
  • 102. View Model DOM Tuesday, November 8, 11
  • 103. View Model DOM View 2 Tuesday, November 8, 11
  • 104. View Model DOM View 2 Tuesday, November 8, 11
  • 105. View Model DOM View 2 Tuesday, November 8, 11
  • 106. View Model DOM View 2 Tuesday, November 8, 11
  • 107. View Model DOM View 2 Tuesday, November 8, 11
  • 108. View Model DOM View 2 Tuesday, November 8, 11
  • 109. View Model DOM View 2 Tuesday, November 8, 11
  • 110. View Model DOM View 2 Tuesday, November 8, 11
  • 111. View Model DOM View 2 Tuesday, November 8, 11
  • 112. View Model DOM View 2 Tuesday, November 8, 11
  • 113. View View 2 Model DOM Tuesday, November 8, 11
  • 114. View View 2 Model DOM View 3 Tuesday, November 8, 11
  • 115. View View 2 Model DOM View 3 View 4 Tuesday, November 8, 11
  • 116. View View 2 Model DOM View 3 View 4 View .. N Tuesday, November 8, 11
  • 117. View View 2 Model DOM View 3 View 4 View .. N Tuesday, November 8, 11
  • 118. View View 2 Model DOM View 3 View 4 View .. N Tuesday, November 8, 11
  • 119. View View 2 Model DOM View 3 View 4 View .. N Tuesday, November 8, 11
  • 120. View View 2 Model DOM View 3 View 4 View .. N Tuesday, November 8, 11
  • 121. View View 2 Model DOM View 3 View 4 View .. N Tuesday, November 8, 11
  • 122. View View 2 Model DOM View 3 View 4 View .. N Tuesday, November 8, 11
  • 123. View View 2 Model DOM View 3 View 4 View .. N Tuesday, November 8, 11
  • 124. View View 2 Model DOM View 3 View 4 View .. N Tuesday, November 8, 11
  • 126. var Calculator = Backbone.Model.extend({ defaults: { value: 0 }, increment: function() { this.set({'value': this.get('value') + 1}); }, decrement: function() { this.set({'value': this.get('value') - 1}); }, getValue: function() { return this.get('value'); } }); Tuesday, November 8, 11
  • 127. var ButtonsView = Backbone.View.extend({ events: { 'click .plus': 'plus', 'click .minus': 'minus' }, plus: function() { this.model.increment(); }, minus: function() { this.model.decrement(); } }); Tuesday, November 8, 11
  • 128. var DisplayView = Backbone.View.extend({ initialize: function() { this.model.bind('change:value', this.render, this); this.render(); }, render: function() { this.el.innerHTML = this.model.getValue(); return this; } }); Tuesday, November 8, 11
  • 129. var cal = new Calculator(); new ButtonsView({model: cal, el: '.buttons'}); new DisplayView({model: cal, el: '.display'}); Tuesday, November 8, 11
  • 131. var ProductsCollection = Backbone.Collection.extend({ model: Product }); var products = new ProductsCollection(); products.fetch(); products.bind('reset', function(list) { console.log('Loaded', list.length, 'records'); }); Tuesday, November 8, 11
  • 132. products.bind('add', function(model) { console.log('new product added'); }); products.bind('remove', function(model) { console.log('item product removed'); }); Tuesday, November 8, 11
  • 133. И още... • Underscore Methods • add / remove / at • sort / comparator • reset • create • url • toJSON Tuesday, November 8, 11
  • 136. var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start(); Tuesday, November 8, 11
  • 137. var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start(); Tuesday, November 8, 11
  • 138. var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start(); Tuesday, November 8, 11
  • 139. var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start(); Tuesday, November 8, 11
  • 140. var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start(); Tuesday, November 8, 11
  • 141. var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start(); Tuesday, November 8, 11
  • 142. var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start(); Tuesday, November 8, 11
  • 143. var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start(); Tuesday, November 8, 11
  • 144. var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start(); Tuesday, November 8, 11
  • 145. var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start(); Tuesday, November 8, 11
  • 146. var AppRouter = Backbone.Router.extend({ routes: { 'pages': 'index', 'pages/search/:q': 'search', 'pages/:id': 'show' }, initialize: function() { console.log('initialize'); }, index: function() { /* code */ }, search: function(query) { /* code */ }, show: function(id) { /* code */ } }); var app = new AppRouter(); Backbone.history.start(); Tuesday, November 8, 11
  • 147. app.navigate('pages', true); app.navigate('pages/search/title', true); app.navigate('pages/3', true); Tuesday, November 8, 11
  • 148. site.com/path#pages site.com/path#pages/search/title site.com/path#pages/3 Tuesday, November 8, 11
  • 151. site.com/path#pages site.com/path#pages/search/title site.com/path#pages/3 Tuesday, November 8, 11
  • 152. site.com/path/pages site.com/path/pages/search/title site.com/path/pages/3 Tuesday, November 8, 11
  • 166. Благодаря за вниманието @rstankov Tuesday, November 8, 11