SlideShare a Scribd company logo
1 of 160
Download to read offline
JSGeneve - Backbone.js
JSGeneve - Backbone.js
JSGeneve - Backbone.js
JSGeneve - Backbone.js
var Animal, myAnimal;

Animal = function (name) {
    this.name = name || 'Unknown';
}

Animal.prototype = {
    say: function () {
        console.log(
            'Hi, my name is ' + this.name + '!'
        );
    }
}

myAnimal = new Animal('Bello');
myAnimal.say(); // Hi, my name is Bello!
var Animal, myAnimal;

Animal = function (name) {
    this.name = name || 'Unknown';
}

Animal.prototype = {
    say: function () {
        console.log(
            'Hi, my name is ' + this.name + '!'
        );
    }
}

myAnimal = new Animal('Bello');
myAnimal.say(); // Hi, my name is Bello!
var Animal, myAnimal;

Animal = function (name) {
    this.name = name || 'Unknown';
}

Animal.prototype = {
    say: function () {
        console.log(
            'Hi, my name is ' + this.name + '!'
        );
    }
}

myAnimal = new Animal('Bello');
myAnimal.say(); // Hi, my name is Bello!
var Animal, myAnimal;

Animal = function (name) {
    this.name = name || 'Unknown';
}

Animal.prototype = {
    say: function () {
        console.log(
            'Hi, my name is ' + this.name + '!'
        );
    }
}

myAnimal = new Animal('Bello');
myAnimal.say(); // Hi, my name is Bello!
var Animal, myAnimal;

Animal = function (name) {
    this.name = name || 'Unknown';
}

Animal.prototype = {
    say: function () {
        console.log(
            'Hi, my name is ' + this.name + '!'
        );
    }
}

myAnimal = new Animal('Bello');
myAnimal.say(); // Hi, my name is Bello!
var Animal, myAnimal;

Animal = function (name) {
    this.name = name || 'Unknown';
}

Animal.prototype = {
    say: function () {
        console.log(
            'Hi, my name is ' + this.name + '!'
        );
    }
}

myAnimal = new Animal('Bello');
myAnimal.say(); // Hi, my name is Bello!
var Animal, myAnimal;

Animal = function (name) {
    this.name = name || 'Unknown';
}

Animal.prototype = {
    say: function () {
        console.log(
            'Hi, my name is ' + this.name + '!'
        );
    }
}

myAnimal = new Animal('Bello');
myAnimal.say(); // Hi, my name is Bello!
var Animal, myAnimal;

Animal = function (name) {
    this.name = name || 'Unknown';
}

Animal.prototype = {
    say: function () {
        console.log(
            'Hi, my name is ' + this.name + '!'
        );
    }
}

myAnimal = new Animal('Bello');
myAnimal.say(); // Hi, my name is Bello!
JSGeneve - Backbone.js
JSGeneve - Backbone.js
var Animal = Backbone.Model.extend({
    say: function () {}
});

var Dog = Animal.extend({
    bark: function () {}
});
var Animal = Backbone.Model.extend({
    say: function () {}
});

var Dog = Animal.extend({
    bark: function () {}
});
var Animal = Backbone.Model.extend({
    say: function () {}
});

var Dog = Animal.extend({
    bark: function () {}
});
var Animal = Backbone.Model.extend({
    say: function () {}
});

var Dog = Animal.extend({
    bark: function () {}
});
var Animal = Backbone.Model.extend({
    say: function () {}
});

var Dog = Animal.extend({
    bark: function () {}
});
var Animal = Backbone.Model.extend({
    say: function () {}
});

var Dog = Animal.extend({
    bark: function () {}
});
var Dog = Animal.extend({
    bark: function () {}
});

var myDog = new Dog({
    name: 'Bello'
});
var Dog = Animal.extend({
    bark: function () {}
});

var myDog = new Dog({
    name: 'Bello'
});
// The self-propagating extend function that Backbone classes use.
var extend = function (protoProps, classProps) {
    var child = inherits(this, protoProps, classProps);
    child.extend = this.extend;
    return child;
};

// Set up inheritance for the model, collection, and view.
Backbone.Model.extend = Backbone.Collection.extend =
  Backbone.Router.extend = Backbone.View.extend = extend;
// The self-propagating extend function that Backbone classes use.
var extend = function (protoProps, classProps) {
    var child = inherits(this, protoProps, classProps);
    child.extend = this.extend;
    return child;
};

// Set up inheritance for the model, collection, and view.
Backbone.Model.extend = Backbone.Collection.extend =
  Backbone.Router.extend = Backbone.View.extend = extend;
// The self-propagating extend function that Backbone classes use.
var extend = function (protoProps, classProps) {
    var child = inherits(this, protoProps, classProps);
    child.extend = this.extend;
    return child;
};

// Set up inheritance for the model, collection, and view.
Backbone.Model.extend = Backbone.Collection.extend =
  Backbone.Router.extend = Backbone.View.extend = extend;
// The self-propagating extend function that Backbone classes use.
var extend = function (protoProps, classProps) {
    var child = inherits(this, protoProps, classProps);
    child.extend = this.extend;
    return child;
};

// Set up inheritance for the model, collection, and view.
Backbone.Model.extend = Backbone.Collection.extend =
  Backbone.Router.extend = Backbone.View.extend = extend;
// The self-propagating extend function that Backbone classes use.
var extend = function (protoProps, classProps) {
    var child = inherits(this, protoProps, classProps);
    child.extend = this.extend;
    return child;
};

// Set up inheritance for the model, collection, and view.
Backbone.Model.extend = Backbone.Collection.extend =
  Backbone.Router.extend = Backbone.View.extend = extend;
JSGeneve - Backbone.js
JSGeneve - Backbone.js
JSGeneve - Backbone.js
JSGeneve - Backbone.js
var AppRouter = Backbone.Router.extend({

      routes: {
          '': 'index',
          'q?:query': 'query',
          'show/:id': 'show'
      },

      index: function () {},
      query: function (queryString) {},
      show: function (id) {}

});
var AppRouter = Backbone.Router.extend({

      routes: {
          '': 'index',
          'q?:query': 'query',
          'show/:id': 'show'
      },

      index: function () {},
      query: function (queryString) {},
      show: function (id) {}

});
var AppRouter = Backbone.Router.extend({

      routes: {
          '': 'index',
          'q?:query': 'query',
          'show/:id': 'show'
      },

      index: function () {},
      query: function (queryString) {},
      show: function (id) {}

});
var AppRouter = Backbone.Router.extend({

      routes: {
          '': 'index',
          'q?:query': 'query',
          'show/:id': 'show'
      },

      index: function () {},
      query: function (queryString) {},
      show: function (id) {}

});
var AppRouter = Backbone.Router.extend({

      routes: {
          '': 'index',
          'q?:query': 'query',
          'show/:id': 'show'
      },

      index: function () {},
      query: function (queryString) {},
      show: function (id) {}

});
var AppRouter = Backbone.Router.extend({

      routes: {
          '': 'index',
          'q?:query': 'query',
          'show/:id': 'show'
      },

      index: function () {},
      query: function (queryString) {},
      show: function (id) {}

});
var AppRouter = Backbone.Router.extend({

      routes: {
          '': 'index',
          'q?:query': 'query',
          'show/:id': 'show'
      },

      index: function () {},
      query: function (queryString) {},
      show: function (id) {}

});
var AppRouter = Backbone.Router.extend({

      routes: {
          '': 'index',
          'q?:query': 'query',
          'show/:id': 'show'
      },

      index: function () {},
      query: function (queryString) {},
      show: function (id) {}

});
var AppRouter = Backbone.Router.extend({

      routes: {
          '': 'index',
          'q?:query': 'query',
          'show/:id': 'show'
      },

      index: function () {},
      query: function (queryString) {},
      show: function (id) {}

});
var AppRouter = Backbone.Router.extend({

      routes: {
          '': 'index',
          'q?:query': 'query',
          'show/:id': 'show'
      },

      index: function () {},
      query: function (queryString) {},
      show: function (id) {}

});
Backbone.Router.extend({
    routes: {
        /* matches search/pierre/zurich */
        'search/:who/:where': 'serach',
        /* matches download/avatar/@shvi/large */
        'download/*path': 'download'
    }

      search: function (who, where) {},
      download: function (path) {}
});
Backbone.Router.extend({
    routes: {
        /* matches search/pierre/zurich */
        'search/:who/:where': 'serach',
        /* matches download/avatar/@shvi/large */
        'download/*path': 'download'
    }

      search: function (who, where) {},
      download: function (path) {}
});
var AppRouter = Backbone.Router.extend({
    // …
});
new AppRouter();
Backbone.history.start();
var AppRouter = Backbone.Router.extend({
    // …
});
new AppRouter();
Backbone.history.start();
var AppRouter = Backbone.Router.extend({
    // …
});
new AppRouter();
Backbone.history.start();
JSGeneve - Backbone.js
JSGeneve - Backbone.js
JSGeneve - Backbone.js
var Comment = Backbone.Model.extend({});

var newComment = new Comment({
    name: 'Pierre Spring',
    email: 'pierre@nelm.io',
    text: 'Hello World'
});
var Comment = Backbone.Model.extend({});

var newComment = new Comment({
    name: 'Pierre Spring',
    email: 'pierre@nelm.io',
    text: 'Hello World'
});
var Comment = Backbone.Model.extend({});

var newComment = new Comment({
    name: 'Pierre Spring',
    email: 'pierre@nelm.io',
    text: 'Hello World'
});
var Comment = Backbone.Model.extend({});

var newComment = new Comment({
    name: 'Pierre Spring',
    email: 'pierre@nelm.io',
    text: 'Hello World'
});
var Comment = Backbone.Model.extend({});

var newComment = new Comment({
    name: 'Pierre Spring',
    email: 'pierre@nelm.io',
    text: 'Hello World'
});
var Comment = Backbone.Model.extend({});

var newComment = new Comment({
    name: 'Pierre Spring',
    email: 'pierre@nelm.io',
    text: 'Hello World'
});
var newComment = new Comment({
    text: 'Hello World'
});

newComment.set({
    name: 'Pierre Spring',
    email: 'pierre.spring@caillou.ch'
});

newComment.get('name'); // Pierre Spring
var newComment = new Comment({
    text: 'Hello World'
});

newComment.set({
    name: 'Pierre Spring',
    email: 'pierre.spring@caillou.ch'
});

newComment.get('name'); // Pierre Spring
var newComment = new Comment({
    text: 'Hello World'
});

newComment.set({
    name: 'Pierre Spring',
    email: 'pierre.spring@caillou.ch'
});

newComment.get('name'); // Pierre Spring
var newComment = new Comment({
    text: 'Hello World'
});

newComment.set({
    name: 'Pierre Spring',
    email: 'pierre.spring@caillou.ch'
});

newComment.get('name'); // Pierre Spring
var Comment = Backbone.Model.extend({});

var newComment = new Comment({ /* … */ });

newComment.save();
var Comment = Backbone.Model.extend({
    url: '/api/comment/'
});

var newComment = new Comment({ /* … */ });

newComment.save();
JSGeneve - Backbone.js
var Comment = Backbone.Model.extend({
    localStorage: new Store("comment")
});

var newComment = new Comment({ /* … */ });

newComment.save();
var Comment = Backbone.Model.extend({
    localStorage: new Store("comment"),
    initialize: function (options) {
    }
});

var newComment = new Comment({ /* … */ });

newComment.save();
var Comment = Backbone.Model.extend({
    localStorage: new Store("comment"),
    initialize: function (options) {
        if (!options.date) {
            this.set({
                date: moment().toString()
            });
        }
    }
});

var newComment = new Comment({ /* … */ });

newComment.save();
var Comment = Backbone.Model.extend({
    localStorage: new Store("comment"),
    initialize: function (options) {
        if (!options.date) {
            this.set({
                date: moment().toString()
            });
        }
    }
});

var newComment = new Comment({ /* … */ });

newComment.save();
JSGeneve - Backbone.js
var Comment = Backbone.Model.extend({
    localStorage: new Store("comment"),
    initialize: function (options) {
        if (!options.date) {
            this.set({
                date: moment().toString()
            });
        }
    }
});

var newComment = new Comment({ /* … */ });

newComment.save();
var Comment = Backbone.Model.extend({
    localStorage: new Store("comment"),
    initialize: function (options) {
        if (!options.date) {
            this.set({
                date: moment().toString()
            });
        }
    },
    getDisplayDate: function () {
        var d = this.get('date');
        return moment(d).fromNow();
    }
});
var Comment = Backbone.Model.extend({
    localStorage: new Store("comment"),
    initialize: function (options) {
        if (!options.date) {
            this.set({
                date: moment().toString()
            });
        }
    },
    getDisplayDate: function () {
        var d = this.get('date');
        return moment(d).fromNow();
    }
});
var Comment = Backbone.Model.extend({
    localStorage: new Store("comment"),
    initialize: function (options) {
        if (!options.date) {
            this.set({
                date: moment().toString()
            });
        }
    },
    getDisplayDate: function () {
        var d = this.get('date');
        return moment(d).fromNow();
    }
});
var Comment = Backbone.Model.extend({
    localStorage: new Store("comment"),
    initialize: function (options) {
        if (!options.date) {
            this.set({
                date: moment().toString()
            });
        }
    },
    getDisplayDate: function () {
        var d = this.get('date');
        return moment(d).fromNow();
    }
});
var newComment = new Comment({ /* … */ });

newComment.getDisplayDate();
// a few seconds ago
Backbone.Collection.extend({
    model: CommentModel,
    localStorage: new Store("comment")
});
Backbone.Collection.extend({
    model: CommentModel,
    localStorage: new Store("comment")
});
Backbone.Collection.extend({
    model: CommentModel,
    localStorage: new Store("comment")
});
Backbone.Collection.extend({
    model: CommentModel,
    localStorage: new Store("comment")
});
Backbone.Collection.extend({
    model: CommentModel,
    localStorage: new Store("comment")
});
var CommentCollection = Backbone.Collection.extend({
    /* … */
});

var commentCollection = new CommentCollection();

commentCollection.fetch();

commentCollection.each(function (commentModel) {
    // do s.th.
});
var CommentCollection = Backbone.Collection.extend({
    /* … */
});

var commentCollection = new CommentCollection();

commentCollection.fetch();

commentCollection.each(function (commentModel) {
    // do s.th.
});
var CommentCollection = Backbone.Collection.extend({
    /* … */
});

var commentCollection = new CommentCollection();

commentCollection.fetch();

commentCollection.each(function (commentModel) {
    // do s.th.
});
var CommentCollection = Backbone.Collection.extend({
    /* … */
});

var commentCollection = new CommentCollection();

commentCollection.fetch();

commentCollection.each(function (commentModel) {
    // do s.th.
});
JSGeneve - Backbone.js
var CommentCollection = Backbone.Collection.extend({
    /* … */
});

var commentCollection = new CommentCollection();

commentCollection.fetch();

commentCollection.each(function (commentModel) {
    // do s.th.
});
var newComment = new Comment({ /* … */ });
newComment.save();
commentCollection.add(newComment);
var newComment = new Comment({ /* … */ });
newComment.save();
commentCollection.add(newComment);
var newComment = new Comment({ /* … */ });
newComment.save();
commentCollection.add(newComment);
var newComment = new Comment({ /* … */ });
newComment.save();
commentCollection.add(newComment);
var newComment = new Comment({ /* … */ });
newComment.save();
commentCollection.add(newComment);

var newComment = commentCollection.create({
    /* model attributes */
});
newComment.bind(
    'change',
    function (model) {}
);
newComment.bind(
    'change:name',
    function (model, attribute) {}
);
commentCollection.bind(
    'reset',
    function (commentCollection) {}
);
commentCollection.bind(
    'add',
    function (commentModel) {}
);
newComment.bind(
    'change',
    function (model) {}
);
newComment.bind(
    'change:name',
    function (model, attribute) {}
);
commentCollection.bind(
    'reset',
    function (commentCollection) {}
);
commentCollection.bind(
    'add',
    function (commentModel) {}
);
newComment.bind(
    'change',
    function (model) {}
);
newComment.bind(
    'change:name',
    function (model, attribute) {}
);
commentCollection.bind(
    'reset',
    function (commentCollection) {}
);
commentCollection.bind(
    'add',
    function (commentModel) {}
);
newComment.bind(
    'change',
    function (model) {}
);
newComment.bind(
    'change:name',
    function (model, attribute) {}
);
commentCollection.bind(
    'reset',
    function (commentCollection) {}
);
commentCollection.bind(
    'add',
    function (commentModel) {}
);
newComment.bind(
    'change',
    function (model) {}
);
newComment.bind(
    'change:name',
    function (model, attribute) {}
);
commentCollection.bind(
    'reset',
    function (commentCollection) {}
);
commentCollection.bind(
    'add',
    function (commentModel) {}
);
newComment.bind(
    'change',
    function (model) {}
);
newComment.bind(
    'change:name',
    function (model, attribute) {}
);
commentCollection.bind(
    'reset',
    function (commentCollection) {}
);
commentCollection.bind(
    'add',
    function (commentModel) {}
);
newComment.bind(
    'change',
    function (model) {}
);
newComment.bind(
    'change:name',
    function (model, attribute) {}
);
commentCollection.bind(
    'reset',
    function (commentCollection) {}
);
commentCollection.bind(
    'add',
    function (commentModel) {}
);
newComment.bind(
    'change',
    function (model) {}
);
newComment.bind(
    'change:name',
    function (model, attribute) {}
);
commentCollection.bind(
    'reset',
    function (commentCollection) {}
);
commentCollection.bind(
    'add',
    function (commentModel) {}
);
newComment.bind(
    'change',
    function (model) {}
);
newComment.bind(
    'change:name',
    function (model, attribute) {}
);
commentCollection.bind(
    'reset',
    function (commentCollection) {}
);
commentCollection.bind(
    'add',
    function (commentModel) {}
);
newComment.bind(
    'change',
    function (model) {}
);
newComment.bind(
    'change:name',
    function (model, attribute) {}
);
commentCollection.bind(
    'reset',
    function (commentCollection) {}
);
commentCollection.bind(
    'add',
    function (commentModel) {}
);
newComment.bind(
    'change',
    function (model) {}
);
newComment.bind(
    'change:name',
    function (model, attribute) {}
);
commentCollection.bind(
    'reset',
    function (commentCollection) {}
);
commentCollection.bind(
    'add',
    function (commentModel) {}
);
JSGeneve - Backbone.js
var CommentView = Backbone.View.extend({});
var commentView = new CommentView();
console.log(commentView.el);
// <div></div>
var CommentView = Backbone.View.extend({});
var commentView = new CommentView();
console.log(commentView.el);
// <div></div>
var CommentView = Backbone.View.extend({});
var commentView = new CommentView();
console.log(commentView.el);
// <div></div>
var CommentView = Backbone.View.extend({});
var commentView = new CommentView();
console.log(commentView.el);
// <div></div>
var CommentView = Backbone.View.extend({});
var commentView = new CommentView();
console.log(commentView.el);
// <div></div>
var CommentView = Backbone.View.extend({
    tagName: 'p',
    className: 'comment-list',
    id: 'container',
});
var commentView = new CommentView();
console.log(commentView.el);
// <p id=​"container" class=​"comment-list"/>
var CommentView = Backbone.View.extend({
    tagName: 'p',
    className: 'comment-list',
    id: 'container',
});
var commentView = new CommentView();
console.log(commentView.el);
// <p id=​"container" class=​"comment-list"/>
var CommentView = Backbone.View.extend({
    tagName: 'p',
    className: 'comment-list',
    id: 'container',
});
var commentView = new CommentView();
console.log(commentView.el);
// <p id=​"container" class=​"comment-list"/>
var CommentView = Backbone.View.extend({
    tagName: 'p',
    className: 'comment-list',
    id: 'container',
});
var commentView = new CommentView();
console.log(commentView.el);
// <p id=​"container" class=​"comment-list"/>
var CommentView = Backbone.View.extend({
    el: $('#comment-list')
});
var commentView = new CommentView();
console.log(commentView.el);
var CommentView = Backbone.View.extend({
    initialize: function (options) {
        this.listRowTemplate = _.template($('#listRowTemplate').html());
        options.commentCollection.bind('reset', this.renderRows, this);
        options.commentCollection.bind('add', this.renderRow, this);
    },

      renderRows: function (commentCollection) {
          commentCollection.each(function (commentModel) {
              this.renderRow(commentModel);
          }, this);
      },

      renderRow: function (commentModel) {
          $(this.el).prepend(
              this.listRowTemplate({
                  comment: commentModel.toJSON()
              })
          );
      }
});
var CommentView = Backbone.View.extend({
    initialize: function (options) {
        this.listRowTemplate = _.template($('#listRowTemplate').html());
        options.commentCollection.bind('reset', this.renderRows, this);
        options.commentCollection.bind('add', this.renderRow, this);
    },

      renderRows: function (commentCollection) {
          commentCollection.each(function (commentModel) {
              this.renderRow(commentModel);
          }, this);
      },

      renderRow: function (commentModel) {
          $(this.el).prepend(
              this.listRowTemplate({
                  comment: commentModel.toJSON()
              })
          );
      }
});
var CommentView = Backbone.View.extend({
    initialize: function (options) {
        this.listRowTemplate = _.template($('#listRowTemplate').html());
        options.commentCollection.bind('reset', this.renderRows, this);
        options.commentCollection.bind('add', this.renderRow, this);
    },

      renderRows: function (commentCollection) {
          commentCollection.each(function (commentModel) {
              this.renderRow(commentModel);
          }, this);
      },

      renderRow: function (commentModel) {
          $(this.el).prepend(
              this.listRowTemplate({
                  comment: commentModel.toJSON()
              })
          );
      }
});
var CommentView = Backbone.View.extend({
    initialize: function (options) {
        this.listRowTemplate = _.template($('#listRowTemplate').html());
        options.commentCollection.bind('reset', this.renderRows, this);
        options.commentCollection.bind('add', this.renderRow, this);
    },

      renderRows: function (commentCollection) {
          commentCollection.each(function (commentModel) {
              this.renderRow(commentModel);
          }, this);
      },

      renderRow: function (commentModel) {
          $(this.el).prepend(
              this.listRowTemplate({
                  comment: commentModel.toJSON()
              })
          );
      }
});
var CommentView = Backbone.View.extend({
    initialize: function (options) {
        this.listRowTemplate = _.template($('#listRowTemplate').html());
        options.commentCollection.bind('reset', this.renderRows, this);
        options.commentCollection.bind('add', this.renderRow, this);
    },

      renderRows: function (commentCollection) {
          commentCollection.each(function (commentModel) {
              this.renderRow(commentModel);
          }, this);
      },

      renderRow: function (commentModel) {
          $(this.el).prepend(
              this.listRowTemplate({
                  comment: commentModel.toJSON()
              })
          );
      }
});
var CommentView = Backbone.View.extend({
    initialize: function (options) {
        this.listRowTemplate = _.template($('#listRowTemplate').html());
        options.commentCollection.bind('reset', this.renderRows, this);
        options.commentCollection.bind('add', this.renderRow, this);
    },

      renderRows: function (commentCollection) {
          commentCollection.each(function (commentModel) {
              this.renderRow(commentModel);
          }, this);
      },

      renderRow: function (commentModel) {
          $(this.el).prepend(
              this.listRowTemplate({
                  comment: commentModel.toJSON()
              })
          );
      }
});
var CommentView = Backbone.View.extend({
    initialize: function (options) {
        this.listRowTemplate = _.template($('#listRowTemplate').html());
        options.commentCollection.bind('reset', this.renderRows, this);
        options.commentCollection.bind('add', this.renderRow, this);
    },

      renderRows: function (commentCollection) {
          commentCollection.each(function (commentModel) {
              this.renderRow(commentModel);
          }, this);
      },

      renderRow: function (commentModel) {
          $(this.el).prepend(
              this.listRowTemplate({
                  comment: commentModel.toJSON()
              })
          );
      }
});
var CommentView = Backbone.View.extend({
    initialize: function (options) {
        this.listRowTemplate = _.template($('#listRowTemplate').html());
        options.commentCollection.bind('reset', this.renderRows, this);
        options.commentCollection.bind('add', this.renderRow, this);
    },

      renderRows: function (commentCollection) {
          commentCollection.each(function (commentModel) {
              this.renderRow(commentModel);
          }, this);
      },

      renderRow: function (commentModel) {
          $(this.el).prepend(
              this.listRowTemplate({
                  comment: commentModel.toJSON()
              })
          );
      }
});
var commentCollection = new commentCollection();

var commentView = new CommentView({
    commentCollection: commentCollection
});
var commentCollection = new commentCollection();

var commentView = new CommentView({
    commentCollection: commentCollection
});
var CommentView = Backbone.View.extend({
    initialize: function (options) {
        this.listRowTemplate = _.template($('#listRowTemplate').html());
        options.commentCollection.bind('reset', this.renderRows, this);
        options.commentCollection.bind('add', this.renderRow, this);
    },

      renderRows: function (commentCollection) {
          commentCollection.each(function (commentModel) {
              this.renderRow(commentModel);
          }, this);
      },

      renderRow: function (commentModel) {
          $(this.el).prepend(
              this.listRowTemplate({
                  comment: commentModel.toJSON()
              })
          );
      }
});
var CommentView = Backbone.View.extend({
    initialize: function (options) {
        this.listRowTemplate = _.template($('#listRowTemplate').html());
        options.commentCollection.bind('reset', this.renderRows, this);
        options.commentCollection.bind('add', this.renderRow, this);
    },

      renderRows: function (commentCollection) {
          commentCollection.each(function (commentModel) {
              this.renderRow(commentModel);
          }, this);
      },

      renderRow: function (commentModel) {
          $(this.el).prepend(
              this.listRowTemplate({
                  comment: commentModel.toJSON()
              })
          );
      }
});
var CommentView = Backbone.View.extend({
    initialize: function (options) {
        this.listRowTemplate = _.template($('#listRowTemplate').html());
        options.commentCollection.bind('reset', this.renderRows, this);
        options.commentCollection.bind('add', this.renderRow, this);
    },

      renderRows: function (commentCollection) {
          commentCollection.each(function (commentModel) {
              this.renderRow(commentModel);
          }, this);
      },

      renderRow: function (commentModel) {
          $(this.el).prepend(
              this.listRowTemplate({
                  comment: commentModel.toJSON()
              })
          );
      }
});
var CommentView = Backbone.View.extend({
    initialize: function (options) {
        this.listRowTemplate = _.template($('#listRowTemplate').html());
        options.commentCollection.bind('reset', this.renderRows, this);
        options.commentCollection.bind('add', this.renderRow, this);
    },

      renderRows: function (commentCollection) {
          commentCollection.each(function (commentModel) {
              this.renderRow(commentModel);
          }, this);
      },

      renderRow: function (commentModel) {
          $(this.el).prepend(
              this.listRowTemplate({
                  comment: commentModel.toJSON()
              })
          );
      }
});
var CommentView = Backbone.View.extend({
    initialize: function (options) {
        this.listRowTemplate = _.template($('#listRowTemplate').html());
        options.commentCollection.bind('reset', this.renderRows, this);
        options.commentCollection.bind('add', this.renderRow, this);
    },

      renderRows: function (commentCollection) {
          commentCollection.each(function (commentModel) {
              this.renderRow(commentModel);
          }, this);
      },

      renderRow: function (commentModel) {
          $(this.el).prepend(
              this.listRowTemplate({
                  comment: commentModel.toJSON()
              })
          );
      }
});
var CommentView = Backbone.View.extend({
    initialize: function (options) {
        this.listRowTemplate = _.template($('#listRowTemplate').html());
        options.commentCollection.bind('reset', this.renderRows, this);
        options.commentCollection.bind('add', this.renderRow, this);
    },

      renderRows: function (commentCollection) {
          commentCollection.each(function (commentModel) {
              this.renderRow(commentModel);
          }, this);
      },

      renderRow: function (commentModel) {
          $(this.el).prepend(
              this.listRowTemplate({
                  comment: commentModel.toJSON()
              })
          );
      }
});
var CommentView = Backbone.View.extend({
    initialize: function (options) {
        this.listRowTemplate = _.template($('#listRowTemplate').html());
        options.commentCollection.bind('reset', this.renderRows, this);
        options.commentCollection.bind('add', this.renderRow, this);
    },

      renderRows: function (commentCollection) {
          commentCollection.each(function (commentModel) {
              this.renderRow(commentModel);
          }, this);
      },

      renderRow: function (commentModel) {
          $(this.el).prepend(
              this.listRowTemplate({
                  comment: commentModel.toJSON()
              })
          );
      }
});
var CommentView = Backbone.View.extend({
    initialize: function (options) {
        this.listRowTemplate = _.template($('#listRowTemplate').html());
        options.commentCollection.bind('reset', this.renderRows, this);
        options.commentCollection.bind('add', this.renderRow, this);
    },

      renderRows: function (commentCollection) {
          commentCollection.each(function (commentModel) {
              this.renderRow(commentModel);
          }, this);
      },

      renderRow: function (commentModel) {
          $(this.el).prepend(
              this.listRowTemplate({
                  comment: commentModel.toJSON()
              })
          );
      }
});
var CommentView = Backbone.View.extend({
    initialize: function (options) {
        this.listRowTemplate = _.template($('#listRowTemplate').html());
        options.commentCollection.bind('reset', this.renderRows, this);
        options.commentCollection.bind('add', this.renderRow, this);
    },

      renderRows: function (commentCollection) {
          commentCollection.each(function (commentModel) {
              this.renderRow(commentModel);
          }, this);
      },

      renderRow: function (commentModel) {
          $(this.el).prepend(
              this.listRowTemplate({
                  comment: commentModel.toJSON()
              })
          );
      }
});
var CommentView = Backbone.View.extend({
    initialize: function (options) {
        this.listRowTemplate = _.template($('#listRowTemplate').html());
        options.commentCollection.bind('reset', this.renderRows, this);
        options.commentCollection.bind('add', this.renderRow, this);
    },

      renderRows: function (commentCollection) {
          commentCollection.each(function (commentModel) {
              this.renderRow(commentModel);
          }, this);
      },

      renderRow: function (commentModel) {
          $(this.el).prepend(
              this.listRowTemplate({
                  comment: commentModel.toJSON()
              })
          );
      }
});
var CommentView = Backbone.View.extend({
    initialize: function (options) {
        this.listRowTemplate = _.template($('#listRowTemplate').html());
        options.commentCollection.bind('reset', this.renderRows, this);
        options.commentCollection.bind('add', this.renderRow, this);
    },

      renderRows: function (commentCollection) {
          commentCollection.each(function (commentModel) {
              this.renderRow(commentModel);
          }, this);
      },

      renderRow: function (commentModel) {
          $(this.el).prepend(
              this.listRowTemplate({
                  comment: commentModel.toJSON()
              })
          );
      }
});
var CommentView = Backbone.View.extend({
    initialize: function (options) {
        this.listRowTemplate = _.template($('#listRowTemplate').html());
        options.commentCollection.bind('reset', this.renderRows, this);
        options.commentCollection.bind('add', this.renderRow, this);
    },

      renderRows: function (commentCollection) {
          commentCollection.each(function (commentModel) {
              this.renderRow(commentModel);
          }, this);
      },

      renderRow: function (commentModel) {
          $(this.el).prepend(
              this.listRowTemplate({
                  comment: commentModel.toJSON()
              })
          );
      }
});
var CommentView = Backbone.View.extend({
    initialize: function (options) {
        this.listRowTemplate = _.template($('#listRowTemplate').html());
        options.commentCollection.bind('reset', this.renderRows, this);
        options.commentCollection.bind('add', this.renderRow, this);
    },

      renderRows: function (commentCollection) {
          commentCollection.each(function (commentModel) {
              this.renderRow(commentModel);
          }, this);
      },

      renderRow: function (commentModel) {
          $(this.el).prepend(
              this.listRowTemplate({
                  comment: commentModel.toJSON()
              })
          );
      }
});
var CommentView = Backbone.View.extend({
    initialize: function (options) {
        this.listRowTemplate = _.template($('#listRowTemplate').html());
        options.commentCollection.bind('reset', this.renderRows, this);
        options.commentCollection.bind('add', this.renderRow, this);
    },

      renderRows: function (commentCollection) {
          commentCollection.each(function (commentModel) {
              this.renderRow(commentModel);
          }, this);
      },

      renderRow: function (commentModel) {
          $(this.el).prepend(
              this.listRowTemplate({
                  comment: commentModel.toJSON()
              })
          );
      }
});
var commentCollection = new commentCollection();

var commentView = new CommentView({
    commentCollection: commentCollection
});

$('.list-view').html(commentView.el);

commentCollection.fetch();
var commentCollection = new commentCollection();

var commentView = new CommentView({
    commentCollection: commentCollection
});

$('.list-view').html(commentView.el);

commentCollection.fetch();
var commentCollection = new commentCollection();

var commentView = new CommentView({
    commentCollection: commentCollection
});

$('.list-view').html(commentView.el);

commentCollection.fetch();
var commentCollection = new commentCollection();

var commentView = new CommentView({
    commentCollection: commentCollection
});

$('.list-view').html(commentView.el);

commentCollection.fetch();
var CommentFormView = Backbone.View.extend({
    events: {
        'submit form': 'newComment'
    },
    initialize: function (options) { /* … */ },
    render: function () { /* … */ },

      newComment: function (e) {
          var options, comment;
          e.preventDefault();

          options = {};
          _.each(
              this.$('form').serializeArray(),
              function (field) {
                  options[field.name] = field.value;
              }
          );

          this.commentCollection.create(options);

          this.$('input, textarea').val('');
      }
});
var CommentFormView = Backbone.View.extend({
    events: {
        'submit form': 'newComment'
    },
    initialize: function (options) { /* … */ },
    render: function () { /* … */ },

      newComment: function (e) {
          var options, comment;
          e.preventDefault();

          options = {};
          _.each(
              this.$('form').serializeArray(),
              function (field) {
                  options[field.name] = field.value;
              }
          );

          this.commentCollection.create(options);

          this.$('input, textarea').val('');
      }
});
var CommentFormView = Backbone.View.extend({
    events: {
        'submit form': 'newComment'
    },
    initialize: function (options) { /* … */ },
    render: function () { /* … */ },

      newComment: function (e) {
          var options, comment;
          e.preventDefault();

          options = {};
          _.each(
              this.$('form').serializeArray(),
              function (field) {
                  options[field.name] = field.value;
              }
          );

          this.commentCollection.create(options);

          this.$('input, textarea').val('');
      }
});
var CommentFormView = Backbone.View.extend({
    events: {
        'submit form': 'newComment'
    },
    initialize: function (options) { /* … */ },
    render: function () { /* … */ },

      newComment: function (e) {
          var options, comment;
          e.preventDefault();

          options = {};
          _.each(
              this.$('form').serializeArray(),
              function (field) {
                  options[field.name] = field.value;
              }
          );

          this.commentCollection.create(options);

          this.$('input, textarea').val('');
      }
});
var CommentFormView = Backbone.View.extend({
    events: {
        'submit form': 'newComment'
    },
    initialize: function (options) { /* … */ },
    render: function () { /* … */ },

      newComment: function (e) {
          var options, comment;
          e.preventDefault();

          options = {};
          _.each(
              this.$('form').serializeArray(),
              function (field) {
                  options[field.name] = field.value;
              }
          );

          this.commentCollection.create(options);

          this.$('input, textarea').val('');
      }
});
var CommentFormView = Backbone.View.extend({
    events: {
        'submit form': 'newComment'
    },
    initialize: function (options) { /* … */ },
    render: function () { /* … */ },

      newComment: function (e) {
          var options, comment;
          e.preventDefault();

          options = {};
          _.each(
              this.$('form').serializeArray(),
              function (field) {
                  options[field.name] = field.value;
              }
          );

          this.commentCollection.create(options);

          this.$('input, textarea').val('');
      }
});
var CommentFormView = Backbone.View.extend({
    events: {
        'submit form': 'newComment'
    },
    initialize: function (options) { /* … */ },
    render: function () { /* … */ },

      newComment: function (e) {
          var options, comment;
          e.preventDefault();

          options = {};
          _.each(
              this.$('form').serializeArray(),
              function (field) {
                  options[field.name] = field.value;
              }
          );

          this.commentCollection.create(options);

          this.$('input, textarea').val('');
      }
});
var CommentFormView = Backbone.View.extend({
    events: {
        'submit form': 'newComment'
    },
    initialize: function (options) { /* … */ },
    render: function () { /* … */ },

      newComment: function (e) {
          var options, comment;
          e.preventDefault();

          options = {};
          _.each(
              this.$('form').serializeArray(),
              function (field) {
                  options[field.name] = field.value;
              }
          );

          this.commentCollection.create(options);

          this.$('input, textarea').val('');
      }
});
var CommentFormView = Backbone.View.extend({
    events: {
        'submit form': 'newComment'
    },
    initialize: function (options) { /* … */ },
    render: function () { /* … */ },

      newComment: function (e) {
          var options, comment;
          e.preventDefault();

          options = {};
          _.each(
              this.$('form').serializeArray(),
              function (field) {
                  options[field.name] = field.value;
              }
          );

          this.commentCollection.create(options);

          this.$('input, textarea').val('');
      }
});
var CommentFormView = Backbone.View.extend({
    events: {
        'submit form': 'newComment'
    },
    initialize: function (options) { /* … */ },
    render: function () { /* … */ },

      newComment: function (e) {
          var options, comment;
          e.preventDefault();

          options = {};
          _.each(
              this.$('form').serializeArray(),
              function (field) {
                  options[field.name] = field.value;
              }
          );

          this.commentCollection.create(options);

          this.$('input, textarea').val('');
      }
});
JSGeneve - Backbone.js
JSGeneve - Backbone.js
JSGeneve - Backbone.js
JSGeneve - Backbone.js
JSGeneve - Backbone.js
JSGeneve - Backbone.js
JSGeneve - Backbone.js
JSGeneve - Backbone.js
JSGeneve - Backbone.js
JSGeneve - Backbone.js
JSGeneve - Backbone.js

More Related Content

What's hot

OO Perl with Moose
OO Perl with MooseOO Perl with Moose
OO Perl with MooseNelo Onyiah
 
Building Lithium Apps
Building Lithium AppsBuilding Lithium Apps
Building Lithium AppsNate Abele
 
The Origin of Lithium
The Origin of LithiumThe Origin of Lithium
The Origin of LithiumNate Abele
 
Dependency injection - phpday 2010
Dependency injection - phpday 2010Dependency injection - phpday 2010
Dependency injection - phpday 2010Fabien Potencier
 
Doctrine MongoDB ODM (PDXPHP)
Doctrine MongoDB ODM (PDXPHP)Doctrine MongoDB ODM (PDXPHP)
Doctrine MongoDB ODM (PDXPHP)Kris Wallsmith
 
Introducing Assetic (NYPHP)
Introducing Assetic (NYPHP)Introducing Assetic (NYPHP)
Introducing Assetic (NYPHP)Kris Wallsmith
 
Advanced symfony Techniques
Advanced symfony TechniquesAdvanced symfony Techniques
Advanced symfony TechniquesKris Wallsmith
 
Moose - YAPC::NA 2012
Moose - YAPC::NA 2012Moose - YAPC::NA 2012
Moose - YAPC::NA 2012xSawyer
 
The state of Symfony2 - SymfonyDay 2010
The state of Symfony2 - SymfonyDay 2010The state of Symfony2 - SymfonyDay 2010
The state of Symfony2 - SymfonyDay 2010Fabien Potencier
 
Building Robust jQuery Plugins
Building Robust jQuery PluginsBuilding Robust jQuery Plugins
Building Robust jQuery PluginsJörn Zaefferer
 
Introduction To Moose
Introduction To MooseIntroduction To Moose
Introduction To MooseMike Whitaker
 
Lithium: The Framework for People Who Hate Frameworks
Lithium: The Framework for People Who Hate FrameworksLithium: The Framework for People Who Hate Frameworks
Lithium: The Framework for People Who Hate FrameworksNate Abele
 
ISUCONアプリを Pythonで書いてみた
ISUCONアプリを Pythonで書いてみたISUCONアプリを Pythonで書いてみた
ISUCONアプリを Pythonで書いてみたmemememomo
 
Writing Your App Swiftly
Writing Your App SwiftlyWriting Your App Swiftly
Writing Your App SwiftlySommer Panage
 
The Zen of Lithium
The Zen of LithiumThe Zen of Lithium
The Zen of LithiumNate Abele
 
Swift Programming Language
Swift Programming LanguageSwift Programming Language
Swift Programming LanguageAnıl Sözeri
 

What's hot (20)

OO Perl with Moose
OO Perl with MooseOO Perl with Moose
OO Perl with Moose
 
Building Lithium Apps
Building Lithium AppsBuilding Lithium Apps
Building Lithium Apps
 
The Origin of Lithium
The Origin of LithiumThe Origin of Lithium
The Origin of Lithium
 
Dependency injection - phpday 2010
Dependency injection - phpday 2010Dependency injection - phpday 2010
Dependency injection - phpday 2010
 
Doctrine MongoDB ODM (PDXPHP)
Doctrine MongoDB ODM (PDXPHP)Doctrine MongoDB ODM (PDXPHP)
Doctrine MongoDB ODM (PDXPHP)
 
Introducing Assetic (NYPHP)
Introducing Assetic (NYPHP)Introducing Assetic (NYPHP)
Introducing Assetic (NYPHP)
 
Advanced symfony Techniques
Advanced symfony TechniquesAdvanced symfony Techniques
Advanced symfony Techniques
 
Moose - YAPC::NA 2012
Moose - YAPC::NA 2012Moose - YAPC::NA 2012
Moose - YAPC::NA 2012
 
The state of Symfony2 - SymfonyDay 2010
The state of Symfony2 - SymfonyDay 2010The state of Symfony2 - SymfonyDay 2010
The state of Symfony2 - SymfonyDay 2010
 
Building Robust jQuery Plugins
Building Robust jQuery PluginsBuilding Robust jQuery Plugins
Building Robust jQuery Plugins
 
Symfony2 - OSIDays 2010
Symfony2 - OSIDays 2010Symfony2 - OSIDays 2010
Symfony2 - OSIDays 2010
 
Introduction To Moose
Introduction To MooseIntroduction To Moose
Introduction To Moose
 
PhpBB meets Symfony2
PhpBB meets Symfony2PhpBB meets Symfony2
PhpBB meets Symfony2
 
Lithium: The Framework for People Who Hate Frameworks
Lithium: The Framework for People Who Hate FrameworksLithium: The Framework for People Who Hate Frameworks
Lithium: The Framework for People Who Hate Frameworks
 
ISUCONアプリを Pythonで書いてみた
ISUCONアプリを Pythonで書いてみたISUCONアプリを Pythonで書いてみた
ISUCONアプリを Pythonで書いてみた
 
Functional programming with php7
Functional programming with php7Functional programming with php7
Functional programming with php7
 
Writing Your App Swiftly
Writing Your App SwiftlyWriting Your App Swiftly
Writing Your App Swiftly
 
The Zen of Lithium
The Zen of LithiumThe Zen of Lithium
The Zen of Lithium
 
Lithium Best
Lithium Best Lithium Best
Lithium Best
 
Swift Programming Language
Swift Programming LanguageSwift Programming Language
Swift Programming Language
 

Similar to JSGeneve - Backbone.js

Backbone js
Backbone jsBackbone js
Backbone jsrstankov
 
Aura Project for PHP
Aura Project for PHPAura Project for PHP
Aura Project for PHPHari K T
 
Intro to Advanced JavaScript
Intro to Advanced JavaScriptIntro to Advanced JavaScript
Intro to Advanced JavaScriptryanstout
 
Jsphp 110312161301-phpapp02
Jsphp 110312161301-phpapp02Jsphp 110312161301-phpapp02
Jsphp 110312161301-phpapp02Seri Moth
 
Be RESTful (Symfony Camp 2008)
Be RESTful (Symfony Camp 2008)Be RESTful (Symfony Camp 2008)
Be RESTful (Symfony Camp 2008)Fabien Potencier
 
JSConf: All You Can Leet
JSConf: All You Can LeetJSConf: All You Can Leet
JSConf: All You Can Leetjohndaviddalton
 
Keeping it Small: Getting to know the Slim Micro Framework
Keeping it Small: Getting to know the Slim Micro FrameworkKeeping it Small: Getting to know the Slim Micro Framework
Keeping it Small: Getting to know the Slim Micro FrameworkJeremy Kendall
 
Nashvile Symfony Routes Presentation
Nashvile Symfony Routes PresentationNashvile Symfony Routes Presentation
Nashvile Symfony Routes PresentationBrent Shaffer
 
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer ToolboxAdding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer ToolboxJeff Strauss
 
jQuery Data Manipulate API - A source code dissecting journey
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 journeyHuiyi Yan
 
TDC 2014 - JavaScript de qualidade: hoje, amanhã e sempre!
TDC 2014 - JavaScript de qualidade: hoje, amanhã e sempre!TDC 2014 - JavaScript de qualidade: hoje, amanhã e sempre!
TDC 2014 - JavaScript de qualidade: hoje, amanhã e sempre!Guilherme Carreiro
 
JavaScript - Like a Box of Chocolates
JavaScript - Like a Box of ChocolatesJavaScript - Like a Box of Chocolates
JavaScript - Like a Box of ChocolatesRobert Nyman
 
JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developersStoyan Stefanov
 
EcmaScript 6 - The future is here
EcmaScript 6 - The future is hereEcmaScript 6 - The future is here
EcmaScript 6 - The future is hereSebastiano Armeli
 

Similar to JSGeneve - Backbone.js (20)

Backbone js
Backbone jsBackbone js
Backbone js
 
Say It With Javascript
Say It With JavascriptSay It With Javascript
Say It With Javascript
 
Aura Project for PHP
Aura Project for PHPAura Project for PHP
Aura Project for PHP
 
Intro to Advanced JavaScript
Intro to Advanced JavaScriptIntro to Advanced JavaScript
Intro to Advanced JavaScript
 
Jsphp 110312161301-phpapp02
Jsphp 110312161301-phpapp02Jsphp 110312161301-phpapp02
Jsphp 110312161301-phpapp02
 
Be RESTful (Symfony Camp 2008)
Be RESTful (Symfony Camp 2008)Be RESTful (Symfony Camp 2008)
Be RESTful (Symfony Camp 2008)
 
JSConf: All You Can Leet
JSConf: All You Can LeetJSConf: All You Can Leet
JSConf: All You Can Leet
 
Keeping it Small: Getting to know the Slim Micro Framework
Keeping it Small: Getting to know the Slim Micro FrameworkKeeping it Small: Getting to know the Slim Micro Framework
Keeping it Small: Getting to know the Slim Micro Framework
 
Backbone.js
Backbone.jsBackbone.js
Backbone.js
 
Nashvile Symfony Routes Presentation
Nashvile Symfony Routes PresentationNashvile Symfony Routes Presentation
Nashvile Symfony Routes Presentation
 
Workshop 10: ECMAScript 6
Workshop 10: ECMAScript 6Workshop 10: ECMAScript 6
Workshop 10: ECMAScript 6
 
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer ToolboxAdding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer Toolbox
 
jQuery Data Manipulate API - A source code dissecting journey
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
 
TDC 2014 - JavaScript de qualidade: hoje, amanhã e sempre!
TDC 2014 - JavaScript de qualidade: hoje, amanhã e sempre!TDC 2014 - JavaScript de qualidade: hoje, amanhã e sempre!
TDC 2014 - JavaScript de qualidade: hoje, amanhã e sempre!
 
JavaScript - Like a Box of Chocolates
JavaScript - Like a Box of ChocolatesJavaScript - Like a Box of Chocolates
JavaScript - Like a Box of Chocolates
 
JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developers
 
JavaScript Promise
JavaScript PromiseJavaScript Promise
JavaScript Promise
 
ES6 Overview
ES6 OverviewES6 Overview
ES6 Overview
 
Codigo taller-plugins
Codigo taller-pluginsCodigo taller-plugins
Codigo taller-plugins
 
EcmaScript 6 - The future is here
EcmaScript 6 - The future is hereEcmaScript 6 - The future is here
EcmaScript 6 - The future is here
 

More from Pierre Spring

Responsive Web at Webtuesday
Responsive Web at WebtuesdayResponsive Web at Webtuesday
Responsive Web at WebtuesdayPierre Spring
 
Frontend Performance - Web Entwickler Forum
Frontend Performance - Web Entwickler ForumFrontend Performance - Web Entwickler Forum
Frontend Performance - Web Entwickler ForumPierre Spring
 
Introduction to Scrum
Introduction to ScrumIntroduction to Scrum
Introduction to ScrumPierre Spring
 
Varnish Lightning Talk
Varnish Lightning TalkVarnish Lightning Talk
Varnish Lightning TalkPierre Spring
 
Speedy App: Frontend Performance Considerations
Speedy App: Frontend Performance ConsiderationsSpeedy App: Frontend Performance Considerations
Speedy App: Frontend Performance ConsiderationsPierre Spring
 

More from Pierre Spring (6)

Responsive Web at Webtuesday
Responsive Web at WebtuesdayResponsive Web at Webtuesday
Responsive Web at Webtuesday
 
Frontend Performance - Web Entwickler Forum
Frontend Performance - Web Entwickler ForumFrontend Performance - Web Entwickler Forum
Frontend Performance - Web Entwickler Forum
 
Introduction to Scrum
Introduction to ScrumIntroduction to Scrum
Introduction to Scrum
 
Varnish Lightning Talk
Varnish Lightning TalkVarnish Lightning Talk
Varnish Lightning Talk
 
Oop in java script
Oop in java scriptOop in java script
Oop in java script
 
Speedy App: Frontend Performance Considerations
Speedy App: Frontend Performance ConsiderationsSpeedy App: Frontend Performance Considerations
Speedy App: Frontend Performance Considerations
 

Recently uploaded

Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsDianaGray10
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch TuesdayIvanti
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updateadam112203
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIVijayananda Mohire
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTopCSSGallery
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...DianaGray10
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and businessFrancesco Corti
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveIES VE
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingFrancesco Corti
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024Brian Pichman
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfTejal81
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingMAGNIntelligence
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kitJamie (Taka) Wang
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Alkin Tezuysal
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0DanBrown980551
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechProduct School
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud DataEric D. Schabell
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4DianaGray10
 

Recently uploaded (20)

Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projects
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch Tuesday
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 update
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development Companies
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and business
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is going
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kit
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4
 

JSGeneve - Backbone.js

  • 5. var Animal, myAnimal; Animal = function (name) { this.name = name || 'Unknown'; } Animal.prototype = { say: function () { console.log( 'Hi, my name is ' + this.name + '!' ); } } myAnimal = new Animal('Bello'); myAnimal.say(); // Hi, my name is Bello!
  • 6. var Animal, myAnimal; Animal = function (name) { this.name = name || 'Unknown'; } Animal.prototype = { say: function () { console.log( 'Hi, my name is ' + this.name + '!' ); } } myAnimal = new Animal('Bello'); myAnimal.say(); // Hi, my name is Bello!
  • 7. var Animal, myAnimal; Animal = function (name) { this.name = name || 'Unknown'; } Animal.prototype = { say: function () { console.log( 'Hi, my name is ' + this.name + '!' ); } } myAnimal = new Animal('Bello'); myAnimal.say(); // Hi, my name is Bello!
  • 8. var Animal, myAnimal; Animal = function (name) { this.name = name || 'Unknown'; } Animal.prototype = { say: function () { console.log( 'Hi, my name is ' + this.name + '!' ); } } myAnimal = new Animal('Bello'); myAnimal.say(); // Hi, my name is Bello!
  • 9. var Animal, myAnimal; Animal = function (name) { this.name = name || 'Unknown'; } Animal.prototype = { say: function () { console.log( 'Hi, my name is ' + this.name + '!' ); } } myAnimal = new Animal('Bello'); myAnimal.say(); // Hi, my name is Bello!
  • 10. var Animal, myAnimal; Animal = function (name) { this.name = name || 'Unknown'; } Animal.prototype = { say: function () { console.log( 'Hi, my name is ' + this.name + '!' ); } } myAnimal = new Animal('Bello'); myAnimal.say(); // Hi, my name is Bello!
  • 11. var Animal, myAnimal; Animal = function (name) { this.name = name || 'Unknown'; } Animal.prototype = { say: function () { console.log( 'Hi, my name is ' + this.name + '!' ); } } myAnimal = new Animal('Bello'); myAnimal.say(); // Hi, my name is Bello!
  • 12. var Animal, myAnimal; Animal = function (name) { this.name = name || 'Unknown'; } Animal.prototype = { say: function () { console.log( 'Hi, my name is ' + this.name + '!' ); } } myAnimal = new Animal('Bello'); myAnimal.say(); // Hi, my name is Bello!
  • 15. var Animal = Backbone.Model.extend({ say: function () {} }); var Dog = Animal.extend({ bark: function () {} });
  • 16. var Animal = Backbone.Model.extend({ say: function () {} }); var Dog = Animal.extend({ bark: function () {} });
  • 17. var Animal = Backbone.Model.extend({ say: function () {} }); var Dog = Animal.extend({ bark: function () {} });
  • 18. var Animal = Backbone.Model.extend({ say: function () {} }); var Dog = Animal.extend({ bark: function () {} });
  • 19. var Animal = Backbone.Model.extend({ say: function () {} }); var Dog = Animal.extend({ bark: function () {} });
  • 20. var Animal = Backbone.Model.extend({ say: function () {} }); var Dog = Animal.extend({ bark: function () {} });
  • 21. var Dog = Animal.extend({ bark: function () {} }); var myDog = new Dog({ name: 'Bello' });
  • 22. var Dog = Animal.extend({ bark: function () {} }); var myDog = new Dog({ name: 'Bello' });
  • 23. // The self-propagating extend function that Backbone classes use. var extend = function (protoProps, classProps) { var child = inherits(this, protoProps, classProps); child.extend = this.extend; return child; }; // Set up inheritance for the model, collection, and view. Backbone.Model.extend = Backbone.Collection.extend = Backbone.Router.extend = Backbone.View.extend = extend;
  • 24. // The self-propagating extend function that Backbone classes use. var extend = function (protoProps, classProps) { var child = inherits(this, protoProps, classProps); child.extend = this.extend; return child; }; // Set up inheritance for the model, collection, and view. Backbone.Model.extend = Backbone.Collection.extend = Backbone.Router.extend = Backbone.View.extend = extend;
  • 25. // The self-propagating extend function that Backbone classes use. var extend = function (protoProps, classProps) { var child = inherits(this, protoProps, classProps); child.extend = this.extend; return child; }; // Set up inheritance for the model, collection, and view. Backbone.Model.extend = Backbone.Collection.extend = Backbone.Router.extend = Backbone.View.extend = extend;
  • 26. // The self-propagating extend function that Backbone classes use. var extend = function (protoProps, classProps) { var child = inherits(this, protoProps, classProps); child.extend = this.extend; return child; }; // Set up inheritance for the model, collection, and view. Backbone.Model.extend = Backbone.Collection.extend = Backbone.Router.extend = Backbone.View.extend = extend;
  • 27. // The self-propagating extend function that Backbone classes use. var extend = function (protoProps, classProps) { var child = inherits(this, protoProps, classProps); child.extend = this.extend; return child; }; // Set up inheritance for the model, collection, and view. Backbone.Model.extend = Backbone.Collection.extend = Backbone.Router.extend = Backbone.View.extend = extend;
  • 32. var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
  • 33. var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
  • 34. var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
  • 35. var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
  • 36. var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
  • 37. var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
  • 38. var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
  • 39. var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
  • 40. var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
  • 41. var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
  • 42. Backbone.Router.extend({ routes: { /* matches search/pierre/zurich */ 'search/:who/:where': 'serach', /* matches download/avatar/@shvi/large */ 'download/*path': 'download' } search: function (who, where) {}, download: function (path) {} });
  • 43. Backbone.Router.extend({ routes: { /* matches search/pierre/zurich */ 'search/:who/:where': 'serach', /* matches download/avatar/@shvi/large */ 'download/*path': 'download' } search: function (who, where) {}, download: function (path) {} });
  • 44. var AppRouter = Backbone.Router.extend({ // … }); new AppRouter(); Backbone.history.start();
  • 45. var AppRouter = Backbone.Router.extend({ // … }); new AppRouter(); Backbone.history.start();
  • 46. var AppRouter = Backbone.Router.extend({ // … }); new AppRouter(); Backbone.history.start();
  • 50. var Comment = Backbone.Model.extend({}); var newComment = new Comment({ name: 'Pierre Spring', email: 'pierre@nelm.io', text: 'Hello World' });
  • 51. var Comment = Backbone.Model.extend({}); var newComment = new Comment({ name: 'Pierre Spring', email: 'pierre@nelm.io', text: 'Hello World' });
  • 52. var Comment = Backbone.Model.extend({}); var newComment = new Comment({ name: 'Pierre Spring', email: 'pierre@nelm.io', text: 'Hello World' });
  • 53. var Comment = Backbone.Model.extend({}); var newComment = new Comment({ name: 'Pierre Spring', email: 'pierre@nelm.io', text: 'Hello World' });
  • 54. var Comment = Backbone.Model.extend({}); var newComment = new Comment({ name: 'Pierre Spring', email: 'pierre@nelm.io', text: 'Hello World' });
  • 55. var Comment = Backbone.Model.extend({}); var newComment = new Comment({ name: 'Pierre Spring', email: 'pierre@nelm.io', text: 'Hello World' });
  • 56. var newComment = new Comment({ text: 'Hello World' }); newComment.set({ name: 'Pierre Spring', email: 'pierre.spring@caillou.ch' }); newComment.get('name'); // Pierre Spring
  • 57. var newComment = new Comment({ text: 'Hello World' }); newComment.set({ name: 'Pierre Spring', email: 'pierre.spring@caillou.ch' }); newComment.get('name'); // Pierre Spring
  • 58. var newComment = new Comment({ text: 'Hello World' }); newComment.set({ name: 'Pierre Spring', email: 'pierre.spring@caillou.ch' }); newComment.get('name'); // Pierre Spring
  • 59. var newComment = new Comment({ text: 'Hello World' }); newComment.set({ name: 'Pierre Spring', email: 'pierre.spring@caillou.ch' }); newComment.get('name'); // Pierre Spring
  • 60. var Comment = Backbone.Model.extend({}); var newComment = new Comment({ /* … */ }); newComment.save();
  • 61. var Comment = Backbone.Model.extend({ url: '/api/comment/' }); var newComment = new Comment({ /* … */ }); newComment.save();
  • 63. var Comment = Backbone.Model.extend({ localStorage: new Store("comment") }); var newComment = new Comment({ /* … */ }); newComment.save();
  • 64. var Comment = Backbone.Model.extend({ localStorage: new Store("comment"), initialize: function (options) { } }); var newComment = new Comment({ /* … */ }); newComment.save();
  • 65. var Comment = Backbone.Model.extend({ localStorage: new Store("comment"), initialize: function (options) { if (!options.date) { this.set({ date: moment().toString() }); } } }); var newComment = new Comment({ /* … */ }); newComment.save();
  • 66. var Comment = Backbone.Model.extend({ localStorage: new Store("comment"), initialize: function (options) { if (!options.date) { this.set({ date: moment().toString() }); } } }); var newComment = new Comment({ /* … */ }); newComment.save();
  • 68. var Comment = Backbone.Model.extend({ localStorage: new Store("comment"), initialize: function (options) { if (!options.date) { this.set({ date: moment().toString() }); } } }); var newComment = new Comment({ /* … */ }); newComment.save();
  • 69. var Comment = Backbone.Model.extend({ localStorage: new Store("comment"), initialize: function (options) { if (!options.date) { this.set({ date: moment().toString() }); } }, getDisplayDate: function () { var d = this.get('date'); return moment(d).fromNow(); } });
  • 70. var Comment = Backbone.Model.extend({ localStorage: new Store("comment"), initialize: function (options) { if (!options.date) { this.set({ date: moment().toString() }); } }, getDisplayDate: function () { var d = this.get('date'); return moment(d).fromNow(); } });
  • 71. var Comment = Backbone.Model.extend({ localStorage: new Store("comment"), initialize: function (options) { if (!options.date) { this.set({ date: moment().toString() }); } }, getDisplayDate: function () { var d = this.get('date'); return moment(d).fromNow(); } });
  • 72. var Comment = Backbone.Model.extend({ localStorage: new Store("comment"), initialize: function (options) { if (!options.date) { this.set({ date: moment().toString() }); } }, getDisplayDate: function () { var d = this.get('date'); return moment(d).fromNow(); } });
  • 73. var newComment = new Comment({ /* … */ }); newComment.getDisplayDate(); // a few seconds ago
  • 74. Backbone.Collection.extend({ model: CommentModel, localStorage: new Store("comment") });
  • 75. Backbone.Collection.extend({ model: CommentModel, localStorage: new Store("comment") });
  • 76. Backbone.Collection.extend({ model: CommentModel, localStorage: new Store("comment") });
  • 77. Backbone.Collection.extend({ model: CommentModel, localStorage: new Store("comment") });
  • 78. Backbone.Collection.extend({ model: CommentModel, localStorage: new Store("comment") });
  • 79. var CommentCollection = Backbone.Collection.extend({ /* … */ }); var commentCollection = new CommentCollection(); commentCollection.fetch(); commentCollection.each(function (commentModel) { // do s.th. });
  • 80. var CommentCollection = Backbone.Collection.extend({ /* … */ }); var commentCollection = new CommentCollection(); commentCollection.fetch(); commentCollection.each(function (commentModel) { // do s.th. });
  • 81. var CommentCollection = Backbone.Collection.extend({ /* … */ }); var commentCollection = new CommentCollection(); commentCollection.fetch(); commentCollection.each(function (commentModel) { // do s.th. });
  • 82. var CommentCollection = Backbone.Collection.extend({ /* … */ }); var commentCollection = new CommentCollection(); commentCollection.fetch(); commentCollection.each(function (commentModel) { // do s.th. });
  • 84. var CommentCollection = Backbone.Collection.extend({ /* … */ }); var commentCollection = new CommentCollection(); commentCollection.fetch(); commentCollection.each(function (commentModel) { // do s.th. });
  • 85. var newComment = new Comment({ /* … */ }); newComment.save(); commentCollection.add(newComment);
  • 86. var newComment = new Comment({ /* … */ }); newComment.save(); commentCollection.add(newComment);
  • 87. var newComment = new Comment({ /* … */ }); newComment.save(); commentCollection.add(newComment);
  • 88. var newComment = new Comment({ /* … */ }); newComment.save(); commentCollection.add(newComment);
  • 89. var newComment = new Comment({ /* … */ }); newComment.save(); commentCollection.add(newComment); var newComment = commentCollection.create({ /* model attributes */ });
  • 90. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 91. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 92. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 93. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 94. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 95. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 96. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 97. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 98. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 99. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 100. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 102. var CommentView = Backbone.View.extend({}); var commentView = new CommentView(); console.log(commentView.el); // <div></div>
  • 103. var CommentView = Backbone.View.extend({}); var commentView = new CommentView(); console.log(commentView.el); // <div></div>
  • 104. var CommentView = Backbone.View.extend({}); var commentView = new CommentView(); console.log(commentView.el); // <div></div>
  • 105. var CommentView = Backbone.View.extend({}); var commentView = new CommentView(); console.log(commentView.el); // <div></div>
  • 106. var CommentView = Backbone.View.extend({}); var commentView = new CommentView(); console.log(commentView.el); // <div></div>
  • 107. var CommentView = Backbone.View.extend({ tagName: 'p', className: 'comment-list', id: 'container', }); var commentView = new CommentView(); console.log(commentView.el); // <p id=​"container" class=​"comment-list"/>
  • 108. var CommentView = Backbone.View.extend({ tagName: 'p', className: 'comment-list', id: 'container', }); var commentView = new CommentView(); console.log(commentView.el); // <p id=​"container" class=​"comment-list"/>
  • 109. var CommentView = Backbone.View.extend({ tagName: 'p', className: 'comment-list', id: 'container', }); var commentView = new CommentView(); console.log(commentView.el); // <p id=​"container" class=​"comment-list"/>
  • 110. var CommentView = Backbone.View.extend({ tagName: 'p', className: 'comment-list', id: 'container', }); var commentView = new CommentView(); console.log(commentView.el); // <p id=​"container" class=​"comment-list"/>
  • 111. var CommentView = Backbone.View.extend({ el: $('#comment-list') }); var commentView = new CommentView(); console.log(commentView.el);
  • 112. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($('#listRowTemplate').html()); options.commentCollection.bind('reset', this.renderRows, this); options.commentCollection.bind('add', this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); } });
  • 113. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($('#listRowTemplate').html()); options.commentCollection.bind('reset', this.renderRows, this); options.commentCollection.bind('add', this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); } });
  • 114. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($('#listRowTemplate').html()); options.commentCollection.bind('reset', this.renderRows, this); options.commentCollection.bind('add', this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); } });
  • 115. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($('#listRowTemplate').html()); options.commentCollection.bind('reset', this.renderRows, this); options.commentCollection.bind('add', this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); } });
  • 116. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($('#listRowTemplate').html()); options.commentCollection.bind('reset', this.renderRows, this); options.commentCollection.bind('add', this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); } });
  • 117. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($('#listRowTemplate').html()); options.commentCollection.bind('reset', this.renderRows, this); options.commentCollection.bind('add', this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); } });
  • 118. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($('#listRowTemplate').html()); options.commentCollection.bind('reset', this.renderRows, this); options.commentCollection.bind('add', this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); } });
  • 119. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($('#listRowTemplate').html()); options.commentCollection.bind('reset', this.renderRows, this); options.commentCollection.bind('add', this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); } });
  • 120. var commentCollection = new commentCollection(); var commentView = new CommentView({ commentCollection: commentCollection });
  • 121. var commentCollection = new commentCollection(); var commentView = new CommentView({ commentCollection: commentCollection });
  • 122. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($('#listRowTemplate').html()); options.commentCollection.bind('reset', this.renderRows, this); options.commentCollection.bind('add', this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); } });
  • 123. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($('#listRowTemplate').html()); options.commentCollection.bind('reset', this.renderRows, this); options.commentCollection.bind('add', this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); } });
  • 124. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($('#listRowTemplate').html()); options.commentCollection.bind('reset', this.renderRows, this); options.commentCollection.bind('add', this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); } });
  • 125. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($('#listRowTemplate').html()); options.commentCollection.bind('reset', this.renderRows, this); options.commentCollection.bind('add', this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); } });
  • 126. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($('#listRowTemplate').html()); options.commentCollection.bind('reset', this.renderRows, this); options.commentCollection.bind('add', this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); } });
  • 127. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($('#listRowTemplate').html()); options.commentCollection.bind('reset', this.renderRows, this); options.commentCollection.bind('add', this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); } });
  • 128. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($('#listRowTemplate').html()); options.commentCollection.bind('reset', this.renderRows, this); options.commentCollection.bind('add', this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); } });
  • 129. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($('#listRowTemplate').html()); options.commentCollection.bind('reset', this.renderRows, this); options.commentCollection.bind('add', this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); } });
  • 130. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($('#listRowTemplate').html()); options.commentCollection.bind('reset', this.renderRows, this); options.commentCollection.bind('add', this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); } });
  • 131. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($('#listRowTemplate').html()); options.commentCollection.bind('reset', this.renderRows, this); options.commentCollection.bind('add', this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); } });
  • 132. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($('#listRowTemplate').html()); options.commentCollection.bind('reset', this.renderRows, this); options.commentCollection.bind('add', this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); } });
  • 133. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($('#listRowTemplate').html()); options.commentCollection.bind('reset', this.renderRows, this); options.commentCollection.bind('add', this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); } });
  • 134. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($('#listRowTemplate').html()); options.commentCollection.bind('reset', this.renderRows, this); options.commentCollection.bind('add', this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); } });
  • 135. var CommentView = Backbone.View.extend({ initialize: function (options) { this.listRowTemplate = _.template($('#listRowTemplate').html()); options.commentCollection.bind('reset', this.renderRows, this); options.commentCollection.bind('add', this.renderRow, this); }, renderRows: function (commentCollection) { commentCollection.each(function (commentModel) { this.renderRow(commentModel); }, this); }, renderRow: function (commentModel) { $(this.el).prepend( this.listRowTemplate({ comment: commentModel.toJSON() }) ); } });
  • 136. var commentCollection = new commentCollection(); var commentView = new CommentView({ commentCollection: commentCollection }); $('.list-view').html(commentView.el); commentCollection.fetch();
  • 137. var commentCollection = new commentCollection(); var commentView = new CommentView({ commentCollection: commentCollection }); $('.list-view').html(commentView.el); commentCollection.fetch();
  • 138. var commentCollection = new commentCollection(); var commentView = new CommentView({ commentCollection: commentCollection }); $('.list-view').html(commentView.el); commentCollection.fetch();
  • 139. var commentCollection = new commentCollection(); var commentView = new CommentView({ commentCollection: commentCollection }); $('.list-view').html(commentView.el); commentCollection.fetch();
  • 140. var CommentFormView = Backbone.View.extend({ events: { 'submit form': 'newComment' }, initialize: function (options) { /* … */ }, render: function () { /* … */ }, newComment: function (e) { var options, comment; e.preventDefault(); options = {}; _.each( this.$('form').serializeArray(), function (field) { options[field.name] = field.value; } ); this.commentCollection.create(options); this.$('input, textarea').val(''); } });
  • 141. var CommentFormView = Backbone.View.extend({ events: { 'submit form': 'newComment' }, initialize: function (options) { /* … */ }, render: function () { /* … */ }, newComment: function (e) { var options, comment; e.preventDefault(); options = {}; _.each( this.$('form').serializeArray(), function (field) { options[field.name] = field.value; } ); this.commentCollection.create(options); this.$('input, textarea').val(''); } });
  • 142. var CommentFormView = Backbone.View.extend({ events: { 'submit form': 'newComment' }, initialize: function (options) { /* … */ }, render: function () { /* … */ }, newComment: function (e) { var options, comment; e.preventDefault(); options = {}; _.each( this.$('form').serializeArray(), function (field) { options[field.name] = field.value; } ); this.commentCollection.create(options); this.$('input, textarea').val(''); } });
  • 143. var CommentFormView = Backbone.View.extend({ events: { 'submit form': 'newComment' }, initialize: function (options) { /* … */ }, render: function () { /* … */ }, newComment: function (e) { var options, comment; e.preventDefault(); options = {}; _.each( this.$('form').serializeArray(), function (field) { options[field.name] = field.value; } ); this.commentCollection.create(options); this.$('input, textarea').val(''); } });
  • 144. var CommentFormView = Backbone.View.extend({ events: { 'submit form': 'newComment' }, initialize: function (options) { /* … */ }, render: function () { /* … */ }, newComment: function (e) { var options, comment; e.preventDefault(); options = {}; _.each( this.$('form').serializeArray(), function (field) { options[field.name] = field.value; } ); this.commentCollection.create(options); this.$('input, textarea').val(''); } });
  • 145. var CommentFormView = Backbone.View.extend({ events: { 'submit form': 'newComment' }, initialize: function (options) { /* … */ }, render: function () { /* … */ }, newComment: function (e) { var options, comment; e.preventDefault(); options = {}; _.each( this.$('form').serializeArray(), function (field) { options[field.name] = field.value; } ); this.commentCollection.create(options); this.$('input, textarea').val(''); } });
  • 146. var CommentFormView = Backbone.View.extend({ events: { 'submit form': 'newComment' }, initialize: function (options) { /* … */ }, render: function () { /* … */ }, newComment: function (e) { var options, comment; e.preventDefault(); options = {}; _.each( this.$('form').serializeArray(), function (field) { options[field.name] = field.value; } ); this.commentCollection.create(options); this.$('input, textarea').val(''); } });
  • 147. var CommentFormView = Backbone.View.extend({ events: { 'submit form': 'newComment' }, initialize: function (options) { /* … */ }, render: function () { /* … */ }, newComment: function (e) { var options, comment; e.preventDefault(); options = {}; _.each( this.$('form').serializeArray(), function (field) { options[field.name] = field.value; } ); this.commentCollection.create(options); this.$('input, textarea').val(''); } });
  • 148. var CommentFormView = Backbone.View.extend({ events: { 'submit form': 'newComment' }, initialize: function (options) { /* … */ }, render: function () { /* … */ }, newComment: function (e) { var options, comment; e.preventDefault(); options = {}; _.each( this.$('form').serializeArray(), function (field) { options[field.name] = field.value; } ); this.commentCollection.create(options); this.$('input, textarea').val(''); } });
  • 149. var CommentFormView = Backbone.View.extend({ events: { 'submit form': 'newComment' }, initialize: function (options) { /* … */ }, render: function () { /* … */ }, newComment: function (e) { var options, comment; e.preventDefault(); options = {}; _.each( this.$('form').serializeArray(), function (field) { options[field.name] = field.value; } ); this.commentCollection.create(options); this.$('input, textarea').val(''); } });