SlideShare uma empresa Scribd logo
1 de 166
Baixar para ler offline
Радослав Станков
      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

Mais conteúdo relacionado

Destaque

Opportunity Execution Project - Career Mentor Online
Opportunity Execution Project - Career Mentor OnlineOpportunity Execution Project - Career Mentor Online
Opportunity Execution Project - Career Mentor OnlineCharles Sun
 
Hum2310 sm2015 proust questionnaire
Hum2310 sm2015 proust questionnaireHum2310 sm2015 proust questionnaire
Hum2310 sm2015 proust questionnaireProfWillAdams
 
フラグ色々&その遅延評価-仮想機械インタープリタ書きのための-
フラグ色々&その遅延評価-仮想機械インタープリタ書きのための-フラグ色々&その遅延評価-仮想機械インタープリタ書きのための-
フラグ色々&その遅延評価-仮想機械インタープリタ書きのための-たけおか しょうぞう
 
KTI Perkembangan Smartphone di Jember
KTI   Perkembangan Smartphone di JemberKTI   Perkembangan Smartphone di Jember
KTI Perkembangan Smartphone di Jember21 Memento
 
상상지니릴레이
상상지니릴레이상상지니릴레이
상상지니릴레이HaNee Seo
 
2006 Winter Newsletter
2006 Winter Newsletter2006 Winter Newsletter
2006 Winter NewsletterDirect Relief
 
Arh2050 1730 syllabus
Arh2050 1730 syllabusArh2050 1730 syllabus
Arh2050 1730 syllabusProfWillAdams
 
Java Tech & Tools | Big Blobs: Moving Big Data In and Out of the Cloud | Adri...
Java Tech & Tools | Big Blobs: Moving Big Data In and Out of the Cloud | Adri...Java Tech & Tools | Big Blobs: Moving Big Data In and Out of the Cloud | Adri...
Java Tech & Tools | Big Blobs: Moving Big Data In and Out of the Cloud | Adri...JAX London
 
Hum2220 sm2015 syllabus
Hum2220 sm2015 syllabusHum2220 sm2015 syllabus
Hum2220 sm2015 syllabusProfWillAdams
 
Errol morris essay
Errol morris essayErrol morris essay
Errol morris essaypkirk63
 
квест Pons 1
квест Pons 1квест Pons 1
квест Pons 1MarkovDA
 

Destaque (17)

KEPERCAYAAN GURU
KEPERCAYAAN GURU KEPERCAYAAN GURU
KEPERCAYAAN GURU
 
Tsahim 4
Tsahim 4Tsahim 4
Tsahim 4
 
Opportunity Execution Project - Career Mentor Online
Opportunity Execution Project - Career Mentor OnlineOpportunity Execution Project - Career Mentor Online
Opportunity Execution Project - Career Mentor Online
 
Hum2310 sm2015 proust questionnaire
Hum2310 sm2015 proust questionnaireHum2310 sm2015 proust questionnaire
Hum2310 sm2015 proust questionnaire
 
フラグ色々&その遅延評価-仮想機械インタープリタ書きのための-
フラグ色々&その遅延評価-仮想機械インタープリタ書きのための-フラグ色々&その遅延評価-仮想機械インタープリタ書きのための-
フラグ色々&その遅延評価-仮想機械インタープリタ書きのための-
 
KTI Perkembangan Smartphone di Jember
KTI   Perkembangan Smartphone di JemberKTI   Perkembangan Smartphone di Jember
KTI Perkembangan Smartphone di Jember
 
상상지니릴레이
상상지니릴레이상상지니릴레이
상상지니릴레이
 
2006 Winter Newsletter
2006 Winter Newsletter2006 Winter Newsletter
2006 Winter Newsletter
 
2001 annual report
2001 annual report2001 annual report
2001 annual report
 
Arh2050 1730 syllabus
Arh2050 1730 syllabusArh2050 1730 syllabus
Arh2050 1730 syllabus
 
Java Tech & Tools | Big Blobs: Moving Big Data In and Out of the Cloud | Adri...
Java Tech & Tools | Big Blobs: Moving Big Data In and Out of the Cloud | Adri...Java Tech & Tools | Big Blobs: Moving Big Data In and Out of the Cloud | Adri...
Java Tech & Tools | Big Blobs: Moving Big Data In and Out of the Cloud | Adri...
 
Hum2220 sm2015 syllabus
Hum2220 sm2015 syllabusHum2220 sm2015 syllabus
Hum2220 sm2015 syllabus
 
Errol morris essay
Errol morris essayErrol morris essay
Errol morris essay
 
квест Pons 1
квест Pons 1квест Pons 1
квест Pons 1
 
Loopbaanbeleid
LoopbaanbeleidLoopbaanbeleid
Loopbaanbeleid
 
Noooo
NooooNoooo
Noooo
 
(R)evolutionize APM
(R)evolutionize APM(R)evolutionize APM
(R)evolutionize APM
 

Semelhante a Backbone.js

2009, o ano do Ruby on Rails no Brasil - CaelumDay 2009
2009, o ano do Ruby on Rails no Brasil - CaelumDay 20092009, o ano do Ruby on Rails no Brasil - CaelumDay 2009
2009, o ano do Ruby on Rails no Brasil - CaelumDay 2009Caue Guerra
 
MVC In Depth, part 1
MVC In Depth, part 1MVC In Depth, part 1
MVC In Depth, part 1Sencha
 
What's new in HTML5, CSS3 and JavaScript, James Pearce
What's new in HTML5, CSS3 and JavaScript, James PearceWhat's new in HTML5, CSS3 and JavaScript, James Pearce
What's new in HTML5, CSS3 and JavaScript, James PearceSencha
 
Devon 2011-f-4-improve your-javascript
Devon 2011-f-4-improve your-javascriptDevon 2011-f-4-improve your-javascript
Devon 2011-f-4-improve your-javascriptDaum DNA
 
Parallelizing a Real-Time Steering Simulation for Computer Games with OpenMP ...
Parallelizing a Real-Time Steering Simulation for Computer Games with OpenMP ...Parallelizing a Real-Time Steering Simulation for Computer Games with OpenMP ...
Parallelizing a Real-Time Steering Simulation for Computer Games with OpenMP ...Bjoern Knafla
 
Rcos presentation
Rcos presentationRcos presentation
Rcos presentationmskmoorthy
 
OpenDolphin: Enterprise Apps for collaboration on Desktop, Web, and Mobile
OpenDolphin: Enterprise Apps for collaboration on Desktop, Web, and MobileOpenDolphin: Enterprise Apps for collaboration on Desktop, Web, and Mobile
OpenDolphin: Enterprise Apps for collaboration on Desktop, Web, and MobileDierk König
 
Community Code: The SenchaCon App
Community Code: The SenchaCon AppCommunity Code: The SenchaCon App
Community Code: The SenchaCon AppSencha
 

Semelhante a Backbone.js (8)

2009, o ano do Ruby on Rails no Brasil - CaelumDay 2009
2009, o ano do Ruby on Rails no Brasil - CaelumDay 20092009, o ano do Ruby on Rails no Brasil - CaelumDay 2009
2009, o ano do Ruby on Rails no Brasil - CaelumDay 2009
 
MVC In Depth, part 1
MVC In Depth, part 1MVC In Depth, part 1
MVC In Depth, part 1
 
What's new in HTML5, CSS3 and JavaScript, James Pearce
What's new in HTML5, CSS3 and JavaScript, James PearceWhat's new in HTML5, CSS3 and JavaScript, James Pearce
What's new in HTML5, CSS3 and JavaScript, James Pearce
 
Devon 2011-f-4-improve your-javascript
Devon 2011-f-4-improve your-javascriptDevon 2011-f-4-improve your-javascript
Devon 2011-f-4-improve your-javascript
 
Parallelizing a Real-Time Steering Simulation for Computer Games with OpenMP ...
Parallelizing a Real-Time Steering Simulation for Computer Games with OpenMP ...Parallelizing a Real-Time Steering Simulation for Computer Games with OpenMP ...
Parallelizing a Real-Time Steering Simulation for Computer Games with OpenMP ...
 
Rcos presentation
Rcos presentationRcos presentation
Rcos presentation
 
OpenDolphin: Enterprise Apps for collaboration on Desktop, Web, and Mobile
OpenDolphin: Enterprise Apps for collaboration on Desktop, Web, and MobileOpenDolphin: Enterprise Apps for collaboration on Desktop, Web, and Mobile
OpenDolphin: Enterprise Apps for collaboration on Desktop, Web, and Mobile
 
Community Code: The SenchaCon App
Community Code: The SenchaCon AppCommunity Code: The SenchaCon App
Community Code: The SenchaCon App
 

Mais de OpenFest team

Embedding FreeBSD: for large and small beds
Embedding FreeBSD: for large and small bedsEmbedding FreeBSD: for large and small beds
Embedding FreeBSD: for large and small bedsOpenFest team
 
Why you can charge for open source software
Why you can charge for open source softwareWhy you can charge for open source software
Why you can charge for open source softwareOpenFest team
 
Microinvest Warehouse Open
Microinvest Warehouse OpenMicroinvest Warehouse Open
Microinvest Warehouse OpenOpenFest team
 
Как да правим по-добър бизнес с услуги около софтуера с отворен код
Как да правим по-добър бизнес с услуги около софтуера с отворен кодКак да правим по-добър бизнес с услуги около софтуера с отворен код
Как да правим по-добър бизнес с услуги около софтуера с отворен кодOpenFest team
 
Електронни пари: Пътят до BitCoin и поглед напред
Електронни пари: Пътят до BitCoin и поглед напредЕлектронни пари: Пътят до BitCoin и поглед напред
Електронни пари: Пътят до BitCoin и поглед напредOpenFest team
 
Виртуализирано видеонаблюдение под FreeBSD
Виртуализирано видеонаблюдение под FreeBSDВиртуализирано видеонаблюдение под FreeBSD
Виртуализирано видеонаблюдение под FreeBSDOpenFest team
 
RFID технологии и проблеми със сигурността им
RFID технологии и проблеми със сигурността имRFID технологии и проблеми със сигурността им
RFID технологии и проблеми със сигурността имOpenFest team
 
Redis the better NoSQL
Redis the better NoSQLRedis the better NoSQL
Redis the better NoSQLOpenFest team
 
Свободни PLC
Свободни PLCСвободни PLC
Свободни PLCOpenFest team
 
Distributed WPA PSK security audit
Distributed WPA PSK security auditDistributed WPA PSK security audit
Distributed WPA PSK security auditOpenFest team
 
Why kernelspace sucks?
Why kernelspace sucks?Why kernelspace sucks?
Why kernelspace sucks?OpenFest team
 
Направи си сам суперкомпютър
Направи си сам суперкомпютърНаправи си сам суперкомпютър
Направи си сам суперкомпютърOpenFest team
 
Свободни курсове за обучение
Свободни курсове за обучениеСвободни курсове за обучение
Свободни курсове за обучениеOpenFest team
 
Using Open Source technologies to create Enterprise Level Cloud System
Using Open Source technologies to create Enterprise Level Cloud SystemUsing Open Source technologies to create Enterprise Level Cloud System
Using Open Source technologies to create Enterprise Level Cloud SystemOpenFest team
 
Behaviour-Driven Development, Ruby Style
Behaviour-Driven Development, Ruby StyleBehaviour-Driven Development, Ruby Style
Behaviour-Driven Development, Ruby StyleOpenFest team
 

Mais de OpenFest team (20)

Embedding FreeBSD: for large and small beds
Embedding FreeBSD: for large and small bedsEmbedding FreeBSD: for large and small beds
Embedding FreeBSD: for large and small beds
 
Why you can charge for open source software
Why you can charge for open source softwareWhy you can charge for open source software
Why you can charge for open source software
 
Microinvest Warehouse Open
Microinvest Warehouse OpenMicroinvest Warehouse Open
Microinvest Warehouse Open
 
Как да правим по-добър бизнес с услуги около софтуера с отворен код
Как да правим по-добър бизнес с услуги около софтуера с отворен кодКак да правим по-добър бизнес с услуги около софтуера с отворен код
Как да правим по-добър бизнес с услуги около софтуера с отворен код
 
Pf sense 2.0
Pf sense 2.0Pf sense 2.0
Pf sense 2.0
 
Електронни пари: Пътят до BitCoin и поглед напред
Електронни пари: Пътят до BitCoin и поглед напредЕлектронни пари: Пътят до BitCoin и поглед напред
Електронни пари: Пътят до BitCoin и поглед напред
 
Node.social
Node.socialNode.social
Node.social
 
Виртуализирано видеонаблюдение под FreeBSD
Виртуализирано видеонаблюдение под FreeBSDВиртуализирано видеонаблюдение под FreeBSD
Виртуализирано видеонаблюдение под FreeBSD
 
RFID технологии и проблеми със сигурността им
RFID технологии и проблеми със сигурността имRFID технологии и проблеми със сигурността им
RFID технологии и проблеми със сигурността им
 
Redis the better NoSQL
Redis the better NoSQLRedis the better NoSQL
Redis the better NoSQL
 
initLab
initLabinitLab
initLab
 
Свободни PLC
Свободни PLCСвободни PLC
Свободни PLC
 
Distributed WPA PSK security audit
Distributed WPA PSK security auditDistributed WPA PSK security audit
Distributed WPA PSK security audit
 
Aesaes
AesaesAesaes
Aesaes
 
Why kernelspace sucks?
Why kernelspace sucks?Why kernelspace sucks?
Why kernelspace sucks?
 
Направи си сам суперкомпютър
Направи си сам суперкомпютърНаправи си сам суперкомпютър
Направи си сам суперкомпютър
 
Свободни курсове за обучение
Свободни курсове за обучениеСвободни курсове за обучение
Свободни курсове за обучение
 
Using Open Source technologies to create Enterprise Level Cloud System
Using Open Source technologies to create Enterprise Level Cloud SystemUsing Open Source technologies to create Enterprise Level Cloud System
Using Open Source technologies to create Enterprise Level Cloud System
 
Emacs reborn
Emacs rebornEmacs reborn
Emacs reborn
 
Behaviour-Driven Development, Ruby Style
Behaviour-Driven Development, Ruby StyleBehaviour-Driven Development, Ruby Style
Behaviour-Driven Development, Ruby Style
 

Último

UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 

Último (20)

UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 

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