Backbone js

rstankov
Радослав Станков
OpenFest           05/11/2011
Кой съм аз?

@rstankov




http://rstankov.com
http://github.com/rstankov
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Browser




        Controller




Model                View


        Сървър
Browser




        Controller




Model                View


        Сървър
Browser




        Controller




Model                View


        Сървър
Browser




        Controller




Model                View


        Сървър
Browser




        Controller




Model                View


        Сървър
Browser




        Controller




Model                View


        Сървър
Browser




        Controller




Model                View


        Сървър
Browser




        Controller




Model                View


        Сървър
Browser




        Controller




Model                View


        Сървър
Browser




        Controller




Model                View


        Сървър
Browser




        Controller




Model                View


        Сървър
Browser




        Controller




Model                View


        Сървър
Browser




        Controller




Model                View


        Сървър
Browser
Dom




View




Model
Browser
Dom




View




Model
Browser
Dom




View




Model
Browser
Dom




View




Model
Browser
Dom




View




Model
Browser
Dom




View




Model
Browser
Dom




View




Model
Browser
Dom




View




Model
Browser
Dom




View




Model
Backbone.Events
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'
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'
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'
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'
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'
Backbone.Model
var Person = Backbone.Model.extend({
  initialize: function(){
    console.log("I'm alive!");
  }
});

new Person();
var Person = Backbone.Model.extend({
  initialize: function(){
    console.log("I'm alive!");
  }
});

new Person();
var Person = Backbone.Model.extend({
  initialize: function(){
    console.log("I'm alive!");
  }
});

new Person();
var Person = Backbone.Model.extend({});

var me = new Person({name: 'Radoslav'});

me.get('name');                  // Radoslav
me.set({lastName: 'Stankov'});
me.get('lastName');               // Stankov
var Person = Backbone.Model.extend({});

var me = new Person({name: 'Radoslav'});

me.get('name');                  // Radoslav
me.set({lastName: 'Stankov'});
me.get('lastName');               // Stankov
var Person = Backbone.Model.extend({});

var me = new Person({name: 'Radoslav'});

me.get('name');                  // Radoslav
me.set({lastName: 'Stankov'});
me.get('lastName');               // Stankov
var Person = Backbone.Model.extend({});

var me = new Person({name: 'Radoslav'});

me.get('name');                  // Radoslav
me.set({lastName: 'Stankov'});
me.get('lastName');               // Stankov
var Person = Backbone.Model.extend({});

var me = new Person({name: 'Radoslav'});

me.get('name');                  // Radoslav
me.set({lastName: 'Stankov'});
me.get('lastName');               // Stankov
var Person = Backbone.Model.extend({
  defaults: {
    name: 'John',
    lastName: 'Doe',
  }
});

var me = new Person();
me.get('name'); // John
me.get('lastName'); // Doe
var Person = Backbone.Model.extend({
  defaults: {
    name: 'John',
    lastName: 'Doe',
  }
});

var me = new Person();
me.get('name'); // John
me.get('lastName'); // Doe
var Person = Backbone.Model.extend({
  defaults: {
    name: 'John',
    lastName: 'Doe',
  }
});

var me = new Person();
me.get('name'); // John
me.get('lastName'); // Doe
var Person = Backbone.Model.extend({
  defaults: {
    name: 'John',
    lastName: 'Doe',
  }
});

var me = new Person();
me.get('name'); // John
me.get('lastName'); // Doe
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});
  }
});
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});
  }
});
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});
  }
});
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});
  }
});
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});
  }
});
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);
});
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);
});
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);
});
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);
});
var cal = new Calculator();

cal.bind('myEvent', function(){
  console.log('KaBoom....');
});

cal.trigger('myEvent');
var Product = Backbone.Model.extend({
  urlRoot: '/products'
});

var chair = new Product({
  name: 'chair',
  price: 10
});

chair.save();

// POST /products
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
http://documentcloud.github.com/backbone/#Model-save
И още...
• validate
• escape
• has
• unset
• clear
• hasChanged
• changedAttributes
• previousAttributes
• fetch
• toJSON
• clone
Backbone.View
Backbone js
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">
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">
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">
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">
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">
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">
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">
var UsersListView = Backbone.View.extend({
  el: '#users-list'
});

var userList = new UsersListView();

console.log(userList.el);
var EditBoxView = Backbone.View.extend({});

var element = $('#edit-box-view').get(0),
  editBox = new EditBoxView({el: element});

console.log(editBox.el === element);
var DocumentView = Backbone.View.extend({
  events: {
    'dblclick':        'open',
    'click .grid .doc': 'select',
    'customEvent .title': 'custom'
  },
  open: function() {},
  select: function() {},
  custom: function() {}
});
var DocumentView = Backbone.View.extend({
  events: {
    'dblclick':        'open',
    'click .grid .doc': 'select',
    'customEvent .title': 'custom'
  },
  open: function() {},
  select: function() {},
  custom: function() {}
});
var DocumentView = Backbone.View.extend({
  events: {
    'dblclick':        'open',
    'click .grid .doc': 'select',
    'customEvent .title': 'custom'
  },
  open: function() {},
  select: function() {},
  custom: function() {}
});
var DocumentView = Backbone.View.extend({
  events: {
    'dblclick':        'open',
    'click .grid .doc': 'select',
    'customEvent .title': 'custom'
  },
  open: function() {},
  select: function() {},
  custom: function() {}
});
var DocumentView = Backbone.View.extend({
  events: {
    'dblclick':        'open',
    'click .grid .doc': 'select',
    'customEvent .title': 'custom'
  },
  open: function() {},
  select: function() {},
  custom: function() {}
});
var DocumentView = Backbone.View.extend({
  events: {
    'dblclick':        'open',
    'click .grid .doc': 'select',
    'customEvent .title': 'custom'
  },
  open: function() {},
  select: function() {},
  custom: function() {}
});
var DocumentView = Backbone.View.extend({
  events: {
    'dblclick':        'open',
    'click .grid .doc': 'select',
    'customEvent .title': 'custom'
  },
  open: function() {},
  select: function() {},
  custom: function() {}
});
<script type="text/template" id="news">
 <h1><%= title %></h1>
 <time><%= created_at %></time>
 <p><%= text %></p>
</script>
var NewsView = Backbone.View.extend({
  template: _.template($('#news').html()),
  render: function() {
    this.el.innerHTML = this.template(this.model);
    return this;
  }
});
var view = new NewsView({
  model: {
    title: "News Title",
    created_at: "Today",
    text: "Long text"
  }
});

document.body.appendChild(view.render().el);
<script type="text/template" id="news">
 <h1><%= title %></h1>
 <time><%= created_at %></time>
 <p><%= text %></p>
</script>
<div>
 <h1>News Title</h1>
 <time>Today</time>
 <p>Long text</p>
</div>
View




Model          DOM
View




Model          DOM
View




Model          DOM
View




Model          DOM
View




Model          DOM
View




Model          DOM
View




Model          DOM
View




Model          DOM
View




Model          DOM
View




Model          DOM
View




Model            DOM




        View 2
View




Model            DOM




        View 2
View




Model            DOM




        View 2
View




Model            DOM




        View 2
View




Model            DOM




        View 2
View




Model            DOM




        View 2
View




Model            DOM




        View 2
View




Model            DOM




        View 2
View




Model            DOM




        View 2
View




Model            DOM




        View 2
View




        View 2



Model            DOM
View




        View 2



Model            DOM
        View 3
View




        View 2



Model            DOM
        View 3




        View 4
View




         View 2



Model               DOM
         View 3




         View 4




        View .. N
View




         View 2



Model               DOM
         View 3




         View 4




        View .. N
View




         View 2



Model               DOM
         View 3




         View 4




        View .. N
View




         View 2



Model               DOM
         View 3




         View 4




        View .. N
View




         View 2



Model               DOM
         View 3




         View 4




        View .. N
View




         View 2



Model               DOM
         View 3




         View 4




        View .. N
View




         View 2



Model               DOM
         View 3




         View 4




        View .. N
View




         View 2



Model               DOM
         View 3




         View 4




        View .. N
View




         View 2



Model               DOM
         View 3




         View 4




        View .. N
Demo
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');
  }
});
var ButtonsView = Backbone.View.extend({
  events: {
    'click .plus': 'plus',
    'click .minus': 'minus'
  },
  plus: function() {
    this.model.increment();
  },
  minus: function() {
    this.model.decrement();
  }
});
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;
  }
});
var cal = new Calculator();

new ButtonsView({model: cal, el: '.buttons'});
new DisplayView({model: cal, el: '.display'});
Backbone.Collection
var ProductsCollection = Backbone.Collection.extend({
  model: Product
});

var products = new ProductsCollection();

products.fetch();

products.bind('reset', function(list) {
  console.log('Loaded', list.length, 'records');
});
products.bind('add', function(model) {
  console.log('new product added');
});

products.bind('remove', function(model) {
  console.log('item product removed');
});
И още...


• Underscore Methods
• add / remove / at
• sort / comparator
• reset
• create
• url
• toJSON
Backbone.Router
Backbone js
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();
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();
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();
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();
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();
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();
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();
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();
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();
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();
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();
app.navigate('pages', true);
app.navigate('pages/search/title', true);
app.navigate('pages/3', true);
site.com/path#pages
site.com/path#pages/search/title
site.com/path#pages/3
Backbone js
Backbone.history.start({pushState: true});
site.com/path#pages
site.com/path#pages/search/title
site.com/path#pages/3
site.com/path/pages
site.com/path/pages/search/title
site.com/path/pages/3
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Backbone js
Недостатъци
Алтернативи
Алтернативи
Алтернативи
Алтернативи
Въпроси?
Благодаря за вниманието



@rstankov
1 of 166

Recommended

Ruby/Rails by
Ruby/RailsRuby/Rails
Ruby/Railsrstankov
860 views113 slides
Why ruby by
Why rubyWhy ruby
Why rubyrstankov
604 views86 slides
jQuery introduction by
jQuery introductionjQuery introduction
jQuery introductionStijn Van Minnebruggen
1.3K views107 slides
Testing your javascript code with jasmine by
Testing your javascript code with jasmineTesting your javascript code with jasmine
Testing your javascript code with jasmineRubyc Slides
1.2K views14 slides
Aplicacoes dinamicas Rails com Backbone by
Aplicacoes dinamicas Rails com BackboneAplicacoes dinamicas Rails com Backbone
Aplicacoes dinamicas Rails com BackboneRafael Felix da Silva
1.1K views95 slides
Class-based views with Django by
Class-based views with DjangoClass-based views with Django
Class-based views with DjangoSimon Willison
2.7K views23 slides

More Related Content

What's hot

JavaScript Unit Testing with Jasmine by
JavaScript Unit Testing with JasmineJavaScript Unit Testing with Jasmine
JavaScript Unit Testing with JasmineRaimonds Simanovskis
4.6K views29 slides
Symfony2 Building on Alpha / Beta technology by
Symfony2 Building on Alpha / Beta technologySymfony2 Building on Alpha / Beta technology
Symfony2 Building on Alpha / Beta technologyDaniel Knell
750 views59 slides
Min-Maxing Software Costs - Laracon EU 2015 by
Min-Maxing Software Costs - Laracon EU 2015Min-Maxing Software Costs - Laracon EU 2015
Min-Maxing Software Costs - Laracon EU 2015Konstantin Kudryashov
14.2K views95 slides
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K by
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2KZepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2KThomas Fuchs
13.6K views39 slides
jQuery from the very beginning by
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginningAnis Ahmad
11.8K views73 slides
Workshop 1: Good practices in JavaScript by
Workshop 1: Good practices in JavaScriptWorkshop 1: Good practices in JavaScript
Workshop 1: Good practices in JavaScriptVisual Engineering
963 views45 slides

What's hot(20)

Symfony2 Building on Alpha / Beta technology by Daniel Knell
Symfony2 Building on Alpha / Beta technologySymfony2 Building on Alpha / Beta technology
Symfony2 Building on Alpha / Beta technology
Daniel Knell750 views
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K by Thomas Fuchs
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2KZepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Zepto.js, a jQuery-compatible mobile JavaScript framework in 2K
Thomas Fuchs13.6K views
jQuery from the very beginning by Anis Ahmad
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginning
Anis Ahmad11.8K views
Node.js in action by Simon Su
Node.js in actionNode.js in action
Node.js in action
Simon Su8.7K views
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter... by Domenic Denicola
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...
Domenic Denicola184.2K views
Venturing Into The Wild: A .NET Developer's Experience As A Ruby Developer by Jon Kruger
Venturing Into The Wild: A .NET Developer's Experience As A Ruby DeveloperVenturing Into The Wild: A .NET Developer's Experience As A Ruby Developer
Venturing Into The Wild: A .NET Developer's Experience As A Ruby Developer
Jon Kruger2K views
5 Tips for Better JavaScript by Todd Anglin
5 Tips for Better JavaScript5 Tips for Better JavaScript
5 Tips for Better JavaScript
Todd Anglin72.4K views
Testable, Object-Oriented JavaScript by Jon Kruger
Testable, Object-Oriented JavaScriptTestable, Object-Oriented JavaScript
Testable, Object-Oriented JavaScript
Jon Kruger2.9K views
Dollar symbol by Aaron Huang
Dollar symbolDollar symbol
Dollar symbol
Aaron Huang1.1K views
Crafting beautiful software by Jorn Oomen
Crafting beautiful softwareCrafting beautiful software
Crafting beautiful software
Jorn Oomen2K views
06 jQuery #burningkeyboards by Denis Ristic
06 jQuery  #burningkeyboards06 jQuery  #burningkeyboards
06 jQuery #burningkeyboards
Denis Ristic81 views
Dutch PHP Conference - PHPSpec 2 - The only Design Tool you need by Kacper Gunia
Dutch PHP Conference - PHPSpec 2 - The only Design Tool you needDutch PHP Conference - PHPSpec 2 - The only Design Tool you need
Dutch PHP Conference - PHPSpec 2 - The only Design Tool you need
Kacper Gunia50.4K views
05 JavaScript #burningkeyboards by Denis Ristic
05 JavaScript #burningkeyboards05 JavaScript #burningkeyboards
05 JavaScript #burningkeyboards
Denis Ristic114 views

Similar to Backbone js

Building Your First Widget by
Building Your First WidgetBuilding Your First Widget
Building Your First WidgetChris Wilcoxson
2.5K views46 slides
前端MVC 豆瓣说 by
前端MVC 豆瓣说前端MVC 豆瓣说
前端MVC 豆瓣说Ting Lv
3.7K views116 slides
JSGeneve - Backbone.js by
JSGeneve - Backbone.jsJSGeneve - Backbone.js
JSGeneve - Backbone.jsPierre Spring
1.4K views160 slides
JSDay Italy - Backbone.js by
JSDay Italy - Backbone.jsJSDay Italy - Backbone.js
JSDay Italy - Backbone.jsPierre Spring
2.4K views207 slides
Understanding backbonejs by
Understanding backbonejsUnderstanding backbonejs
Understanding backbonejsNick Lee
2.6K views39 slides
AngularJs by
AngularJsAngularJs
AngularJsHossein Baghayi
858 views102 slides

Similar to Backbone js(20)

前端MVC 豆瓣说 by Ting Lv
前端MVC 豆瓣说前端MVC 豆瓣说
前端MVC 豆瓣说
Ting Lv3.7K views
JSGeneve - Backbone.js by Pierre Spring
JSGeneve - Backbone.jsJSGeneve - Backbone.js
JSGeneve - Backbone.js
Pierre Spring1.4K views
JSDay Italy - Backbone.js by Pierre Spring
JSDay Italy - Backbone.jsJSDay Italy - Backbone.js
JSDay Italy - Backbone.js
Pierre Spring2.4K views
Understanding backbonejs by Nick Lee
Understanding backbonejsUnderstanding backbonejs
Understanding backbonejs
Nick Lee2.6K views
Doctrine For Beginners by Jonathan Wage
Doctrine For BeginnersDoctrine For Beginners
Doctrine For Beginners
Jonathan Wage1.5K views
TypeScriptで書くAngularJS @ GDG神戸2014.8.23 by Okuno Kentaro
TypeScriptで書くAngularJS @ GDG神戸2014.8.23TypeScriptで書くAngularJS @ GDG神戸2014.8.23
TypeScriptで書くAngularJS @ GDG神戸2014.8.23
Okuno Kentaro15.3K views
¿Cómo de sexy puede hacer Backbone mi código? by jaespinmora
¿Cómo de sexy puede hacer Backbone mi código?¿Cómo de sexy puede hacer Backbone mi código?
¿Cómo de sexy puede hacer Backbone mi código?
jaespinmora618 views
Bonnes pratiques de développement avec Node js by Francois Zaninotto
Bonnes pratiques de développement avec Node jsBonnes pratiques de développement avec Node js
Bonnes pratiques de développement avec Node js
Francois Zaninotto5.7K views
jQuery Data Manipulate API - A source code dissecting journey by Huiyi Yan
jQuery Data Manipulate API - A source code dissecting journeyjQuery Data Manipulate API - A source code dissecting journey
jQuery Data Manipulate API - A source code dissecting journey
Huiyi Yan44 views
Backbone.js — Introduction to client-side JavaScript MVC by pootsbook
Backbone.js — Introduction to client-side JavaScript MVCBackbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVC
pootsbook3K views
Real Time App with Node.js by Jxck Jxck
Real Time App with Node.jsReal Time App with Node.js
Real Time App with Node.js
Jxck Jxck3.7K views
Simple Web Apps With Sinatra by a_l
Simple Web Apps With SinatraSimple Web Apps With Sinatra
Simple Web Apps With Sinatra
a_l2.5K views

Recently uploaded

"How we switched to Kanban and how it integrates with product planning", Vady... by
"How we switched to Kanban and how it integrates with product planning", Vady..."How we switched to Kanban and how it integrates with product planning", Vady...
"How we switched to Kanban and how it integrates with product planning", Vady...Fwdays
61 views24 slides
.conf Go 2023 - Data analysis as a routine by
.conf Go 2023 - Data analysis as a routine.conf Go 2023 - Data analysis as a routine
.conf Go 2023 - Data analysis as a routineSplunk
90 views12 slides
Throughput by
ThroughputThroughput
ThroughputMoisés Armani Ramírez
32 views11 slides
Java Platform Approach 1.0 - Picnic Meetup by
Java Platform Approach 1.0 - Picnic MeetupJava Platform Approach 1.0 - Picnic Meetup
Java Platform Approach 1.0 - Picnic MeetupRick Ossendrijver
25 views39 slides
Understanding GenAI/LLM and What is Google Offering - Felix Goh by
Understanding GenAI/LLM and What is Google Offering - Felix GohUnderstanding GenAI/LLM and What is Google Offering - Felix Goh
Understanding GenAI/LLM and What is Google Offering - Felix GohNUS-ISS
39 views33 slides
Transcript: The Details of Description Techniques tips and tangents on altern... by
Transcript: The Details of Description Techniques tips and tangents on altern...Transcript: The Details of Description Techniques tips and tangents on altern...
Transcript: The Details of Description Techniques tips and tangents on altern...BookNet Canada
119 views15 slides

Recently uploaded(20)

"How we switched to Kanban and how it integrates with product planning", Vady... by Fwdays
"How we switched to Kanban and how it integrates with product planning", Vady..."How we switched to Kanban and how it integrates with product planning", Vady...
"How we switched to Kanban and how it integrates with product planning", Vady...
Fwdays61 views
.conf Go 2023 - Data analysis as a routine by Splunk
.conf Go 2023 - Data analysis as a routine.conf Go 2023 - Data analysis as a routine
.conf Go 2023 - Data analysis as a routine
Splunk90 views
Understanding GenAI/LLM and What is Google Offering - Felix Goh by NUS-ISS
Understanding GenAI/LLM and What is Google Offering - Felix GohUnderstanding GenAI/LLM and What is Google Offering - Felix Goh
Understanding GenAI/LLM and What is Google Offering - Felix Goh
NUS-ISS39 views
Transcript: The Details of Description Techniques tips and tangents on altern... by BookNet Canada
Transcript: The Details of Description Techniques tips and tangents on altern...Transcript: The Details of Description Techniques tips and tangents on altern...
Transcript: The Details of Description Techniques tips and tangents on altern...
BookNet Canada119 views
Beyond the Hype: What Generative AI Means for the Future of Work - Damien Cum... by NUS-ISS
Beyond the Hype: What Generative AI Means for the Future of Work - Damien Cum...Beyond the Hype: What Generative AI Means for the Future of Work - Damien Cum...
Beyond the Hype: What Generative AI Means for the Future of Work - Damien Cum...
NUS-ISS28 views
AMD: 4th Generation EPYC CXL Demo by CXL Forum
AMD: 4th Generation EPYC CXL DemoAMD: 4th Generation EPYC CXL Demo
AMD: 4th Generation EPYC CXL Demo
CXL Forum126 views
.conf Go 2023 - How KPN drives Customer Satisfaction on IPTV by Splunk
.conf Go 2023 - How KPN drives Customer Satisfaction on IPTV.conf Go 2023 - How KPN drives Customer Satisfaction on IPTV
.conf Go 2023 - How KPN drives Customer Satisfaction on IPTV
Splunk86 views
Business Analyst Series 2023 - Week 3 Session 5 by DianaGray10
Business Analyst Series 2023 -  Week 3 Session 5Business Analyst Series 2023 -  Week 3 Session 5
Business Analyst Series 2023 - Week 3 Session 5
DianaGray10165 views
How to reduce cold starts for Java Serverless applications in AWS at JCON Wor... by Vadym Kazulkin
How to reduce cold starts for Java Serverless applications in AWS at JCON Wor...How to reduce cold starts for Java Serverless applications in AWS at JCON Wor...
How to reduce cold starts for Java Serverless applications in AWS at JCON Wor...
Vadym Kazulkin70 views
Empathic Computing: Delivering the Potential of the Metaverse by Mark Billinghurst
Empathic Computing: Delivering  the Potential of the MetaverseEmpathic Computing: Delivering  the Potential of the Metaverse
Empathic Computing: Delivering the Potential of the Metaverse
Mark Billinghurst449 views
The details of description: Techniques, tips, and tangents on alternative tex... by BookNet Canada
The details of description: Techniques, tips, and tangents on alternative tex...The details of description: Techniques, tips, and tangents on alternative tex...
The details of description: Techniques, tips, and tangents on alternative tex...
BookNet Canada110 views
Web Dev - 1 PPT.pdf by gdsczhcet
Web Dev - 1 PPT.pdfWeb Dev - 1 PPT.pdf
Web Dev - 1 PPT.pdf
gdsczhcet52 views
"Ukrainian Mobile Banking Scaling in Practice. From 0 to 100 and beyond", Vad... by Fwdays
"Ukrainian Mobile Banking Scaling in Practice. From 0 to 100 and beyond", Vad..."Ukrainian Mobile Banking Scaling in Practice. From 0 to 100 and beyond", Vad...
"Ukrainian Mobile Banking Scaling in Practice. From 0 to 100 and beyond", Vad...
Fwdays40 views
Samsung: CMM-H Tiered Memory Solution with Built-in DRAM by CXL Forum
Samsung: CMM-H Tiered Memory Solution with Built-in DRAMSamsung: CMM-H Tiered Memory Solution with Built-in DRAM
Samsung: CMM-H Tiered Memory Solution with Built-in DRAM
CXL Forum105 views
"Role of a CTO in software outsourcing company", Yuriy Nakonechnyy by Fwdays
"Role of a CTO in software outsourcing company", Yuriy Nakonechnyy"Role of a CTO in software outsourcing company", Yuriy Nakonechnyy
"Role of a CTO in software outsourcing company", Yuriy Nakonechnyy
Fwdays40 views
"Quality Assurance: Achieving Excellence in startup without a Dedicated QA", ... by Fwdays
"Quality Assurance: Achieving Excellence in startup without a Dedicated QA", ..."Quality Assurance: Achieving Excellence in startup without a Dedicated QA", ...
"Quality Assurance: Achieving Excellence in startup without a Dedicated QA", ...
Fwdays33 views
Data-centric AI and the convergence of data and model engineering: opportunit... by Paolo Missier
Data-centric AI and the convergence of data and model engineering:opportunit...Data-centric AI and the convergence of data and model engineering:opportunit...
Data-centric AI and the convergence of data and model engineering: opportunit...
Paolo Missier29 views
Architecting CX Measurement Frameworks and Ensuring CX Metrics are fit for Pu... by NUS-ISS
Architecting CX Measurement Frameworks and Ensuring CX Metrics are fit for Pu...Architecting CX Measurement Frameworks and Ensuring CX Metrics are fit for Pu...
Architecting CX Measurement Frameworks and Ensuring CX Metrics are fit for Pu...
NUS-ISS32 views

Backbone js

  • 15. Browser Controller Model View Сървър
  • 16. Browser Controller Model View Сървър
  • 17. Browser Controller Model View Сървър
  • 18. Browser Controller Model View Сървър
  • 19. Browser Controller Model View Сървър
  • 20. Browser Controller Model View Сървър
  • 21. Browser Controller Model View Сървър
  • 22. Browser Controller Model View Сървър
  • 23. Browser Controller Model View Сървър
  • 24. Browser Controller Model View Сървър
  • 25. Browser Controller Model View Сървър
  • 26. Browser Controller Model View Сървър
  • 27. Browser Controller Model View Сървър
  • 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'
  • 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'
  • 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'
  • 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'
  • 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'
  • 44. var Person = Backbone.Model.extend({ initialize: function(){ console.log("I'm alive!"); } }); new Person();
  • 45. var Person = Backbone.Model.extend({ initialize: function(){ console.log("I'm alive!"); } }); new Person();
  • 46. var Person = Backbone.Model.extend({ initialize: function(){ console.log("I'm alive!"); } }); new Person();
  • 47. var Person = Backbone.Model.extend({}); var me = new Person({name: 'Radoslav'}); me.get('name'); // Radoslav me.set({lastName: 'Stankov'}); me.get('lastName'); // Stankov
  • 48. var Person = Backbone.Model.extend({}); var me = new Person({name: 'Radoslav'}); me.get('name'); // Radoslav me.set({lastName: 'Stankov'}); me.get('lastName'); // Stankov
  • 49. var Person = Backbone.Model.extend({}); var me = new Person({name: 'Radoslav'}); me.get('name'); // Radoslav me.set({lastName: 'Stankov'}); me.get('lastName'); // Stankov
  • 50. var Person = Backbone.Model.extend({}); var me = new Person({name: 'Radoslav'}); me.get('name'); // Radoslav me.set({lastName: 'Stankov'}); me.get('lastName'); // Stankov
  • 51. var Person = Backbone.Model.extend({}); var me = new Person({name: 'Radoslav'}); me.get('name'); // Radoslav me.set({lastName: 'Stankov'}); me.get('lastName'); // Stankov
  • 52. var Person = Backbone.Model.extend({ defaults: { name: 'John', lastName: 'Doe', } }); var me = new Person(); me.get('name'); // John me.get('lastName'); // Doe
  • 53. var Person = Backbone.Model.extend({ defaults: { name: 'John', lastName: 'Doe', } }); var me = new Person(); me.get('name'); // John me.get('lastName'); // Doe
  • 54. var Person = Backbone.Model.extend({ defaults: { name: 'John', lastName: 'Doe', } }); var me = new Person(); me.get('name'); // John me.get('lastName'); // Doe
  • 55. var Person = Backbone.Model.extend({ defaults: { name: 'John', lastName: 'Doe', } }); var me = new Person(); me.get('name'); // John me.get('lastName'); // Doe
  • 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}); } });
  • 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}); } });
  • 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}); } });
  • 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}); } });
  • 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}); } });
  • 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); });
  • 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); });
  • 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); });
  • 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); });
  • 65. var cal = new Calculator(); cal.bind('myEvent', function(){ console.log('KaBoom....'); }); cal.trigger('myEvent');
  • 66. var Product = Backbone.Model.extend({ urlRoot: '/products' }); var chair = new Product({ name: 'chair', price: 10 }); chair.save(); // POST /products
  • 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
  • 69. И още... • validate • escape • has • unset • clear • hasChanged • changedAttributes • previousAttributes • fetch • toJSON • clone
  • 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">
  • 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">
  • 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">
  • 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">
  • 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">
  • 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">
  • 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">
  • 79. var UsersListView = Backbone.View.extend({ el: '#users-list' }); var userList = new UsersListView(); console.log(userList.el);
  • 80. var EditBoxView = Backbone.View.extend({}); var element = $('#edit-box-view').get(0), editBox = new EditBoxView({el: element}); console.log(editBox.el === element);
  • 81. var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} });
  • 82. var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} });
  • 83. var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} });
  • 84. var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} });
  • 85. var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} });
  • 86. var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} });
  • 87. var DocumentView = Backbone.View.extend({ events: { 'dblclick': 'open', 'click .grid .doc': 'select', 'customEvent .title': 'custom' }, open: function() {}, select: function() {}, custom: function() {} });
  • 88. <script type="text/template" id="news"> <h1><%= title %></h1> <time><%= created_at %></time> <p><%= text %></p> </script>
  • 89. var NewsView = Backbone.View.extend({ template: _.template($('#news').html()), render: function() { this.el.innerHTML = this.template(this.model); return this; } });
  • 90. var view = new NewsView({ model: { title: "News Title", created_at: "Today", text: "Long text" } }); document.body.appendChild(view.render().el);
  • 91. <script type="text/template" id="news"> <h1><%= title %></h1> <time><%= created_at %></time> <p><%= text %></p> </script>
  • 92. <div> <h1>News Title</h1> <time>Today</time> <p>Long text</p> </div>
  • 93. View Model DOM
  • 94. View Model DOM
  • 95. View Model DOM
  • 96. View Model DOM
  • 97. View Model DOM
  • 98. View Model DOM
  • 99. View Model DOM
  • 100. View Model DOM
  • 101. View Model DOM
  • 102. View Model DOM
  • 103. View Model DOM View 2
  • 104. View Model DOM View 2
  • 105. View Model DOM View 2
  • 106. View Model DOM View 2
  • 107. View Model DOM View 2
  • 108. View Model DOM View 2
  • 109. View Model DOM View 2
  • 110. View Model DOM View 2
  • 111. View Model DOM View 2
  • 112. View Model DOM View 2
  • 113. View View 2 Model DOM
  • 114. View View 2 Model DOM View 3
  • 115. View View 2 Model DOM View 3 View 4
  • 116. View View 2 Model DOM View 3 View 4 View .. N
  • 117. View View 2 Model DOM View 3 View 4 View .. N
  • 118. View View 2 Model DOM View 3 View 4 View .. N
  • 119. View View 2 Model DOM View 3 View 4 View .. N
  • 120. View View 2 Model DOM View 3 View 4 View .. N
  • 121. View View 2 Model DOM View 3 View 4 View .. N
  • 122. View View 2 Model DOM View 3 View 4 View .. N
  • 123. View View 2 Model DOM View 3 View 4 View .. N
  • 124. View View 2 Model DOM View 3 View 4 View .. N
  • 125. Demo
  • 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'); } });
  • 127. var ButtonsView = Backbone.View.extend({ events: { 'click .plus': 'plus', 'click .minus': 'minus' }, plus: function() { this.model.increment(); }, minus: function() { this.model.decrement(); } });
  • 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; } });
  • 129. var cal = new Calculator(); new ButtonsView({model: cal, el: '.buttons'}); new DisplayView({model: cal, el: '.display'});
  • 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'); });
  • 132. products.bind('add', function(model) { console.log('new product added'); }); products.bind('remove', function(model) { console.log('item product removed'); });
  • 133. И още... • Underscore Methods • add / remove / at • sort / comparator • reset • create • url • toJSON
  • 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();
  • 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();
  • 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();
  • 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();
  • 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();
  • 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();
  • 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();
  • 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();
  • 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();
  • 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();
  • 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();

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n
  62. \n
  63. \n
  64. \n
  65. \n
  66. \n
  67. \n
  68. \n
  69. \n
  70. \n
  71. \n
  72. \n
  73. \n
  74. \n
  75. \n
  76. \n
  77. \n
  78. \n
  79. \n
  80. \n
  81. \n
  82. \n
  83. \n
  84. \n
  85. \n
  86. \n
  87. \n
  88. \n
  89. \n
  90. \n
  91. \n
  92. \n
  93. \n
  94. \n
  95. \n
  96. \n
  97. \n
  98. \n
  99. \n
  100. \n
  101. Open-Close prinsible - open for extensions, close for modifications\n\n
  102. Open-Close prinsible - open for extensions, close for modifications\n\n
  103. Open-Close prinsible - open for extensions, close for modifications\n\n
  104. Open-Close prinsible - open for extensions, close for modifications\n\n
  105. Open-Close prinsible - open for extensions, close for modifications\n\n
  106. Open-Close prinsible - open for extensions, close for modifications\n\n
  107. Open-Close prinsible - open for extensions, close for modifications\n\n
  108. Open-Close prinsible - open for extensions, close for modifications\n\n
  109. Open-Close prinsible - open for extensions, close for modifications\n\n
  110. Open-Close prinsible - open for extensions, close for modifications\n\n
  111. Open-Close prinsible - open for extensions, close for modifications\n\n
  112. Open-Close prinsible - open for extensions, close for modifications\n\n
  113. \n
  114. \n
  115. \n
  116. \n
  117. \n
  118. \n
  119. \n
  120. \n
  121. \n
  122. \n
  123. \n
  124. \n
  125. \n
  126. \n
  127. \n
  128. \n
  129. \n
  130. \n
  131. \n
  132. \n
  133. \n
  134. \n
  135. \n
  136. \n
  137. \n
  138. \n
  139. \n
  140. \n
  141. \n
  142. \n
  143. \n
  144. \n
  145. \n
  146. \n
  147. \n
  148. \n
  149. \n
  150. \n
  151. \n