Backbone.js
Upcoming SlideShare
Loading in...5
×
 

Backbone.js

on

  • 9,277 views

Backbone.js - Радослав Станков

Backbone.js - Радослав Станков

Statistics

Views

Total Views
9,277
Views on SlideShare
2,365
Embed Views
6,912

Actions

Likes
4
Downloads
60
Comments
0

8 Embeds 6,912

http://kurapov.name 6835
http://surfingbird.ru 63
http://webcache.googleusercontent.com 7
http://a0.twimg.com 2
http://www.kurapov.name 2
http://surfingbird.com 1
http://hghltd.yandex.net 1
http://localhost 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Backbone.js Backbone.js Presentation Transcript

  • Радослав Станков OpenFest 05/11/2011Tuesday, November 8, 11
  • Кой съм аз? @rstankov http://rstankov.com http://github.com/rstankovTuesday, 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 ModelTuesday, November 8, 11
  • Browser Dom View ModelTuesday, November 8, 11
  • Browser Dom View ModelTuesday, November 8, 11
  • Browser Dom View ModelTuesday, November 8, 11
  • Browser Dom View ModelTuesday, November 8, 11
  • Browser Dom View ModelTuesday, November 8, 11
  • Browser Dom View ModelTuesday, November 8, 11
  • Browser Dom View ModelTuesday, November 8, 11
  • Browser Dom View ModelTuesday, November 8, 11
  • Backbone.EventsTuesday, 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 2Tuesday, 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 2Tuesday, 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 2Tuesday, 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 2Tuesday, 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 2Tuesday, November 8, 11
  • Backbone.ModelTuesday, November 8, 11
  • var Person = Backbone.Model.extend({ initialize: function(){ console.log("Im alive!"); } }); new Person();Tuesday, November 8, 11
  • var Person = Backbone.Model.extend({ initialize: function(){ console.log("Im alive!"); } }); new Person();Tuesday, November 8, 11
  • var Person = Backbone.Model.extend({ initialize: function(){ console.log("Im 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); // StankovTuesday, 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); // StankovTuesday, 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); // StankovTuesday, 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); // StankovTuesday, 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); // StankovTuesday, November 8, 11
  • var Person = Backbone.Model.extend({ defaults: { name: John, lastName: Doe, } }); var me = new Person(); me.get(name); // John me.get(lastName); // DoeTuesday, November 8, 11
  • var Person = Backbone.Model.extend({ defaults: { name: John, lastName: Doe, } }); var me = new Person(); me.get(name); // John me.get(lastName); // DoeTuesday, November 8, 11
  • var Person = Backbone.Model.extend({ defaults: { name: John, lastName: Doe, } }); var me = new Person(); me.get(name); // John me.get(lastName); // DoeTuesday, November 8, 11
  • var Person = Backbone.Model.extend({ defaults: { name: John, lastName: Doe, } }); var me = new Person(); me.get(name); // John me.get(lastName); // DoeTuesday, 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 /productsTuesday, 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/1Tuesday, November 8, 11
  • http://documentcloud.github.com/backbone/#Model-saveTuesday, November 8, 11
  • И още... • validate • escape • has • unset • clear • hasChanged • changedAttributes • previousAttributes • fetch • toJSON • cloneTuesday, November 8, 11
  • Backbone.ViewTuesday, 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 DOMTuesday, November 8, 11
  • View Model DOMTuesday, November 8, 11
  • View Model DOMTuesday, November 8, 11
  • View Model DOMTuesday, November 8, 11
  • View Model DOMTuesday, November 8, 11
  • View Model DOMTuesday, November 8, 11
  • View Model DOMTuesday, November 8, 11
  • View Model DOMTuesday, November 8, 11
  • View Model DOMTuesday, November 8, 11
  • View Model DOMTuesday, November 8, 11
  • View Model DOM View 2Tuesday, November 8, 11
  • View Model DOM View 2Tuesday, November 8, 11
  • View Model DOM View 2Tuesday, November 8, 11
  • View Model DOM View 2Tuesday, November 8, 11
  • View Model DOM View 2Tuesday, November 8, 11
  • View Model DOM View 2Tuesday, November 8, 11
  • View Model DOM View 2Tuesday, November 8, 11
  • View Model DOM View 2Tuesday, November 8, 11
  • View Model DOM View 2Tuesday, November 8, 11
  • View Model DOM View 2Tuesday, November 8, 11
  • View View 2 Model DOMTuesday, November 8, 11
  • View View 2 Model DOM View 3Tuesday, November 8, 11
  • View View 2 Model DOM View 3 View 4Tuesday, November 8, 11
  • View View 2 Model DOM View 3 View 4 View .. NTuesday, November 8, 11
  • View View 2 Model DOM View 3 View 4 View .. NTuesday, November 8, 11
  • View View 2 Model DOM View 3 View 4 View .. NTuesday, November 8, 11
  • View View 2 Model DOM View 3 View 4 View .. NTuesday, November 8, 11
  • View View 2 Model DOM View 3 View 4 View .. NTuesday, November 8, 11
  • View View 2 Model DOM View 3 View 4 View .. NTuesday, November 8, 11
  • View View 2 Model DOM View 3 View 4 View .. NTuesday, November 8, 11
  • View View 2 Model DOM View 3 View 4 View .. NTuesday, November 8, 11
  • View View 2 Model DOM View 3 View 4 View .. NTuesday, November 8, 11
  • DemoTuesday, 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.CollectionTuesday, 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 • toJSONTuesday, November 8, 11
  • Backbone.RouterTuesday, 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/3Tuesday, 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/3Tuesday, November 8, 11
  • site.com/path/pages site.com/path/pages/search/title site.com/path/pages/3Tuesday, 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
  • Благодаря за вниманието @rstankovTuesday, November 8, 11