SlideShare a Scribd company logo
1 of 207
Download to read offline
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!
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 = 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;
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();
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@nelm.io'
});

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

newComment.set({
    name: 'Pierre Spring',
    email: 'pierre@nelm.io'
});

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

newComment.set({
    name: 'Pierre Spring',
    email: 'pierre@nelm.io'
});

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

newComment.set({
    name: 'Pierre Spring',
    email: 'pierre@nelm.io'
});

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();
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();
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.
});
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) {}
);
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('');
      }
});
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js
JSDay Italy - Backbone.js

More Related Content

What's hot

8時間耐久CakePHP2 勉強会
8時間耐久CakePHP2 勉強会8時間耐久CakePHP2 勉強会
8時間耐久CakePHP2 勉強会Yusuke Ando
 
Swift Programming Language
Swift Programming LanguageSwift Programming Language
Swift Programming LanguageAnıl Sözeri
 
Programming Language Swift Overview
Programming Language Swift OverviewProgramming Language Swift Overview
Programming Language Swift OverviewKaz Yoshikawa
 
Class 4 - PHP Arrays
Class 4 - PHP ArraysClass 4 - PHP Arrays
Class 4 - PHP ArraysAhmed Swilam
 
JSConf: All You Can Leet
JSConf: All You Can LeetJSConf: All You Can Leet
JSConf: All You Can Leetjohndaviddalton
 
Unit and Functional Testing with Symfony2
Unit and Functional Testing with Symfony2Unit and Functional Testing with Symfony2
Unit and Functional Testing with Symfony2Fabien Potencier
 
WordCamp Portland 2018: PHP for WordPress
WordCamp Portland 2018: PHP for WordPressWordCamp Portland 2018: PHP for WordPress
WordCamp Portland 2018: PHP for WordPressAlena Holligan
 
Can't Miss Features of PHP 5.3 and 5.4
Can't Miss Features of PHP 5.3 and 5.4Can't Miss Features of PHP 5.3 and 5.4
Can't Miss Features of PHP 5.3 and 5.4Jeff Carouth
 
Php Using Arrays
Php Using ArraysPhp Using Arrays
Php Using Arraysmussawir20
 
Puppet Camp Paris 2015: Power of Puppet 4 (Beginner)
Puppet Camp Paris 2015: Power of Puppet 4 (Beginner) Puppet Camp Paris 2015: Power of Puppet 4 (Beginner)
Puppet Camp Paris 2015: Power of Puppet 4 (Beginner) Puppet
 
Dependency injection in PHP 5.3/5.4
Dependency injection in PHP 5.3/5.4Dependency injection in PHP 5.3/5.4
Dependency injection in PHP 5.3/5.4Fabien Potencier
 
Objective-C & iPhone for .NET Developers
Objective-C & iPhone for .NET DevelopersObjective-C & iPhone for .NET Developers
Objective-C & iPhone for .NET DevelopersBen Scheirman
 
Feature Flags Are Flawed: Let's Make Them Better
Feature Flags Are Flawed: Let's Make Them BetterFeature Flags Are Flawed: Let's Make Them Better
Feature Flags Are Flawed: Let's Make Them BetterStephen Young
 
Jsphp 110312161301-phpapp02
Jsphp 110312161301-phpapp02Jsphp 110312161301-phpapp02
Jsphp 110312161301-phpapp02Seri Moth
 

What's hot (20)

PhpBB meets Symfony2
PhpBB meets Symfony2PhpBB meets Symfony2
PhpBB meets Symfony2
 
Symfony2 - OSIDays 2010
Symfony2 - OSIDays 2010Symfony2 - OSIDays 2010
Symfony2 - OSIDays 2010
 
8時間耐久CakePHP2 勉強会
8時間耐久CakePHP2 勉強会8時間耐久CakePHP2 勉強会
8時間耐久CakePHP2 勉強会
 
Swift Programming Language
Swift Programming LanguageSwift Programming Language
Swift Programming Language
 
Programming Language Swift Overview
Programming Language Swift OverviewProgramming Language Swift Overview
Programming Language Swift Overview
 
Class 4 - PHP Arrays
Class 4 - PHP ArraysClass 4 - PHP Arrays
Class 4 - PHP Arrays
 
JSConf: All You Can Leet
JSConf: All You Can LeetJSConf: All You Can Leet
JSConf: All You Can Leet
 
Unit and Functional Testing with Symfony2
Unit and Functional Testing with Symfony2Unit and Functional Testing with Symfony2
Unit and Functional Testing with Symfony2
 
Elixir cheatsheet
Elixir cheatsheetElixir cheatsheet
Elixir cheatsheet
 
WordCamp Portland 2018: PHP for WordPress
WordCamp Portland 2018: PHP for WordPressWordCamp Portland 2018: PHP for WordPress
WordCamp Portland 2018: PHP for WordPress
 
logic321
logic321logic321
logic321
 
Can't Miss Features of PHP 5.3 and 5.4
Can't Miss Features of PHP 5.3 and 5.4Can't Miss Features of PHP 5.3 and 5.4
Can't Miss Features of PHP 5.3 and 5.4
 
PHP 8.1: Enums
PHP 8.1: EnumsPHP 8.1: Enums
PHP 8.1: Enums
 
Php Using Arrays
Php Using ArraysPhp Using Arrays
Php Using Arrays
 
Puppet Camp Paris 2015: Power of Puppet 4 (Beginner)
Puppet Camp Paris 2015: Power of Puppet 4 (Beginner) Puppet Camp Paris 2015: Power of Puppet 4 (Beginner)
Puppet Camp Paris 2015: Power of Puppet 4 (Beginner)
 
Dependency injection in PHP 5.3/5.4
Dependency injection in PHP 5.3/5.4Dependency injection in PHP 5.3/5.4
Dependency injection in PHP 5.3/5.4
 
Arrays in PHP
Arrays in PHPArrays in PHP
Arrays in PHP
 
Objective-C & iPhone for .NET Developers
Objective-C & iPhone for .NET DevelopersObjective-C & iPhone for .NET Developers
Objective-C & iPhone for .NET Developers
 
Feature Flags Are Flawed: Let's Make Them Better
Feature Flags Are Flawed: Let's Make Them BetterFeature Flags Are Flawed: Let's Make Them Better
Feature Flags Are Flawed: Let's Make Them Better
 
Jsphp 110312161301-phpapp02
Jsphp 110312161301-phpapp02Jsphp 110312161301-phpapp02
Jsphp 110312161301-phpapp02
 

Similar to JSDay Italy - Backbone.js

Backbone js
Backbone jsBackbone js
Backbone jsrstankov
 
Intro to Advanced JavaScript
Intro to Advanced JavaScriptIntro to Advanced JavaScript
Intro to Advanced JavaScriptryanstout
 
Aura Project for PHP
Aura Project for PHPAura Project for PHP
Aura Project for PHPHari K T
 
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 Classes and Inheritance
JavaScript Classes and InheritanceJavaScript Classes and Inheritance
JavaScript Classes and Inheritancemarcheiligers
 
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer ToolboxAdding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer ToolboxJeff Strauss
 
Be RESTful (Symfony Camp 2008)
Be RESTful (Symfony Camp 2008)Be RESTful (Symfony Camp 2008)
Be RESTful (Symfony Camp 2008)Fabien Potencier
 
Impress Your Friends with EcmaScript 2015
Impress Your Friends with EcmaScript 2015Impress Your Friends with EcmaScript 2015
Impress Your Friends with EcmaScript 2015Lukas Ruebbelke
 
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
 
Nashvile Symfony Routes Presentation
Nashvile Symfony Routes PresentationNashvile Symfony Routes Presentation
Nashvile Symfony Routes PresentationBrent Shaffer
 
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
 
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
 
Building Lithium Apps
Building Lithium AppsBuilding Lithium Apps
Building Lithium AppsNate Abele
 
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
 
Koajs as an alternative to Express - OdessaJs'16
Koajs as an alternative to Express - OdessaJs'16Koajs as an alternative to Express - OdessaJs'16
Koajs as an alternative to Express - OdessaJs'16Nikolay Kozhukharenko
 

Similar to JSDay Italy - 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
 
Intro to Advanced JavaScript
Intro to Advanced JavaScriptIntro to Advanced JavaScript
Intro to Advanced JavaScript
 
Aura Project for PHP
Aura Project for PHPAura Project for PHP
Aura Project for PHP
 
JavaScript - Like a Box of Chocolates
JavaScript - Like a Box of ChocolatesJavaScript - Like a Box of Chocolates
JavaScript - Like a Box of Chocolates
 
JavaScript Classes and Inheritance
JavaScript Classes and InheritanceJavaScript Classes and Inheritance
JavaScript Classes and Inheritance
 
Adding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer ToolboxAdding ES6 to Your Developer Toolbox
Adding ES6 to Your Developer Toolbox
 
Workshop 10: ECMAScript 6
Workshop 10: ECMAScript 6Workshop 10: ECMAScript 6
Workshop 10: ECMAScript 6
 
Be RESTful (Symfony Camp 2008)
Be RESTful (Symfony Camp 2008)Be RESTful (Symfony Camp 2008)
Be RESTful (Symfony Camp 2008)
 
Backbone.js
Backbone.jsBackbone.js
Backbone.js
 
Impress Your Friends with EcmaScript 2015
Impress Your Friends with EcmaScript 2015Impress Your Friends with EcmaScript 2015
Impress Your Friends with EcmaScript 2015
 
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
 
Nashvile Symfony Routes Presentation
Nashvile Symfony Routes PresentationNashvile Symfony Routes Presentation
Nashvile Symfony Routes Presentation
 
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
 
JavaScript for PHP developers
JavaScript for PHP developersJavaScript for PHP developers
JavaScript for PHP developers
 
EcmaScript 6 - The future is here
EcmaScript 6 - The future is hereEcmaScript 6 - The future is here
EcmaScript 6 - The future is here
 
Building Lithium Apps
Building Lithium AppsBuilding Lithium Apps
Building Lithium Apps
 
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!
 
Yield
YieldYield
Yield
 
Koajs as an alternative to Express - OdessaJs'16
Koajs as an alternative to Express - OdessaJs'16Koajs as an alternative to Express - OdessaJs'16
Koajs as an alternative to Express - OdessaJs'16
 

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

Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...shyamraj55
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April  Automation LPDGAPIForce Zurich 5 April  Automation LPDG
APIForce Zurich 5 April Automation LPDGMarianaLemus7
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Wonjun Hwang
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 

Recently uploaded (20)

DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort ServiceHot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April  Automation LPDGAPIForce Zurich 5 April  Automation LPDG
APIForce Zurich 5 April Automation LPDG
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 

JSDay Italy - Backbone.js

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33. 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!
  • 34. 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!
  • 35. 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!
  • 36. 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!
  • 37. 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!
  • 38. 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!
  • 39. 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!
  • 40. 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!
  • 41. 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!
  • 42.
  • 43.
  • 44. var Animal = Backbone.Model.extend({ say: function () {} }); var Dog = Animal.extend({ bark: function () {} });
  • 45. var Animal = Backbone.Model.extend({ say: function () {} }); var Dog = Animal.extend({ bark: function () {} });
  • 46. var Animal = Backbone.Model.extend({ say: function () {} }); var Dog = Animal.extend({ bark: function () {} });
  • 47. var Animal = Backbone.Model.extend({ say: function () {} }); var Dog = Animal.extend({ bark: function () {} });
  • 48. var Animal = Backbone.Model.extend({ say: function () {} }); var Dog = Animal.extend({ bark: function () {} });
  • 49. var Animal = Backbone.Model.extend({ say: function () {} }); var Dog = Animal.extend({ bark: function () {} });
  • 50. var Dog = Animal.extend({ bark: function () {} }); var myDog = new Dog({ name: 'Bello' });
  • 51. var Dog = Animal.extend({ bark: function () {} }); var myDog = new Dog({ name: 'Bello' });
  • 52. // 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;
  • 53. // 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;
  • 54. // 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;
  • 55. // 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;
  • 56. // 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;
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76. var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
  • 77. var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
  • 78. var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
  • 79. var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
  • 80. var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
  • 81. var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
  • 82. var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
  • 83. var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
  • 84. var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
  • 85. var AppRouter = Backbone.Router.extend({ routes: { '': 'index', 'q?:query': 'query', 'show/:id': 'show' }, index: function () {}, query: function (queryString) {}, show: function (id) {} });
  • 86. 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) {} });
  • 87. 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) {} });
  • 88. var AppRouter = Backbone.Router.extend({ // … }); new AppRouter(); Backbone.history.start();
  • 89. var AppRouter = Backbone.Router.extend({ // … }); new AppRouter(); Backbone.history.start();
  • 90. var AppRouter = Backbone.Router.extend({ // … }); new AppRouter(); Backbone.history.start();
  • 91.
  • 92.
  • 93.
  • 94.
  • 95. var Comment = Backbone.Model.extend({}); var newComment = new Comment({ name: 'Pierre Spring', email: 'pierre@nelm.io', text: 'Hello World' });
  • 96. var Comment = Backbone.Model.extend({}); var newComment = new Comment({ name: 'Pierre Spring', email: 'pierre@nelm.io', text: 'Hello World' });
  • 97. var Comment = Backbone.Model.extend({}); var newComment = new Comment({ name: 'Pierre Spring', email: 'pierre@nelm.io', text: 'Hello World' });
  • 98. var Comment = Backbone.Model.extend({}); var newComment = new Comment({ name: 'Pierre Spring', email: 'pierre@nelm.io', text: 'Hello World' });
  • 99. var Comment = Backbone.Model.extend({}); var newComment = new Comment({ name: 'Pierre Spring', email: 'pierre@nelm.io', text: 'Hello World' });
  • 100. var Comment = Backbone.Model.extend({}); var newComment = new Comment({ name: 'Pierre Spring', email: 'pierre@nelm.io', text: 'Hello World' });
  • 101. var newComment = new Comment({ text: 'Hello World' }); newComment.set({ name: 'Pierre Spring', email: 'pierre@nelm.io' }); newComment.get('name'); // Pierre Spring
  • 102. var newComment = new Comment({ text: 'Hello World' }); newComment.set({ name: 'Pierre Spring', email: 'pierre@nelm.io' }); newComment.get('name'); // Pierre Spring
  • 103. var newComment = new Comment({ text: 'Hello World' }); newComment.set({ name: 'Pierre Spring', email: 'pierre@nelm.io' }); newComment.get('name'); // Pierre Spring
  • 104. var newComment = new Comment({ text: 'Hello World' }); newComment.set({ name: 'Pierre Spring', email: 'pierre@nelm.io' }); newComment.get('name'); // Pierre Spring
  • 105. var Comment = Backbone.Model.extend({}); var newComment = new Comment({ /* … */ }); newComment.save();
  • 106. var Comment = Backbone.Model.extend({ url: '/api/comment/' }); var newComment = new Comment({ /* … */ }); newComment.save();
  • 107.
  • 108. var Comment = Backbone.Model.extend({ localStorage: new Store("comment") }); var newComment = new Comment({ /* … */ }); newComment.save();
  • 109. var Comment = Backbone.Model.extend({ localStorage: new Store("comment"), initialize: function (options) { } }); var newComment = new Comment({ /* … */ }); newComment.save();
  • 110. 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();
  • 111. 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();
  • 112.
  • 113. 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();
  • 114. 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(); } });
  • 115. 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(); } });
  • 116. 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(); } });
  • 117. 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(); } });
  • 118. var newComment = new Comment({ /* … */ }); newComment.getDisplayDate(); // a few seconds ago
  • 119. Backbone.Collection.extend({ model: CommentModel, localStorage: new Store("comment") });
  • 120. Backbone.Collection.extend({ model: CommentModel, localStorage: new Store("comment") });
  • 121. Backbone.Collection.extend({ model: CommentModel, localStorage: new Store("comment") });
  • 122. Backbone.Collection.extend({ model: CommentModel, localStorage: new Store("comment") });
  • 123. Backbone.Collection.extend({ model: CommentModel, localStorage: new Store("comment") });
  • 124. var CommentCollection = Backbone.Collection.extend({ /* … */ }); var commentCollection = new CommentCollection(); commentCollection.fetch(); commentCollection.each(function (commentModel) { // do s.th. });
  • 125. var CommentCollection = Backbone.Collection.extend({ /* … */ }); var commentCollection = new CommentCollection(); commentCollection.fetch(); commentCollection.each(function (commentModel) { // do s.th. });
  • 126. var CommentCollection = Backbone.Collection.extend({ /* … */ }); var commentCollection = new CommentCollection(); commentCollection.fetch(); commentCollection.each(function (commentModel) { // do s.th. });
  • 127. var CommentCollection = Backbone.Collection.extend({ /* … */ }); var commentCollection = new CommentCollection(); commentCollection.fetch(); commentCollection.each(function (commentModel) { // do s.th. });
  • 128.
  • 129. var CommentCollection = Backbone.Collection.extend({ /* … */ }); var commentCollection = new CommentCollection(); commentCollection.fetch(); commentCollection.each(function (commentModel) { // do s.th. });
  • 130. var newComment = new Comment({ /* … */ }); newComment.save(); commentCollection.add(newComment);
  • 131. var newComment = new Comment({ /* … */ }); newComment.save(); commentCollection.add(newComment);
  • 132. var newComment = new Comment({ /* … */ }); newComment.save(); commentCollection.add(newComment);
  • 133. var newComment = new Comment({ /* … */ }); newComment.save(); commentCollection.add(newComment);
  • 134. var newComment = new Comment({ /* … */ }); newComment.save(); commentCollection.add(newComment); var newComment = commentCollection.create({ /* model attributes */ });
  • 135. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 136. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 137. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 138. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 139. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 140. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 141. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 142. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 143. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 144. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 145. newComment.bind( 'change', function (model) {} ); newComment.bind( 'change:name', function (model, attribute) {} ); commentCollection.bind( 'reset', function (commentCollection) {} ); commentCollection.bind( 'add', function (commentModel) {} );
  • 146.
  • 147. var CommentView = Backbone.View.extend({}); var commentView = new CommentView(); console.log(commentView.el); // <div></div>
  • 148. var CommentView = Backbone.View.extend({}); var commentView = new CommentView(); console.log(commentView.el); // <div></div>
  • 149. var CommentView = Backbone.View.extend({}); var commentView = new CommentView(); console.log(commentView.el); // <div></div>
  • 150. var CommentView = Backbone.View.extend({}); var commentView = new CommentView(); console.log(commentView.el); // <div></div>
  • 151. var CommentView = Backbone.View.extend({}); var commentView = new CommentView(); console.log(commentView.el); // <div></div>
  • 152. 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"/>
  • 153. 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"/>
  • 154. 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"/>
  • 155. 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"/>
  • 156. var CommentView = Backbone.View.extend({ el: $('#comment-list') }); var commentView = new CommentView(); console.log(commentView.el);
  • 157. 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() }) ); } });
  • 158. 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() }) ); } });
  • 159. 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() }) ); } });
  • 160. 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() }) ); } });
  • 161. 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() }) ); } });
  • 162. 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() }) ); } });
  • 163. 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() }) ); } });
  • 164. 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() }) ); } });
  • 165. var commentCollection = new commentCollection(); var commentView = new CommentView({ commentCollection: commentCollection });
  • 166. var commentCollection = new commentCollection(); var commentView = new CommentView({ commentCollection: commentCollection });
  • 167. 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() }) ); } });
  • 168. 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() }) ); } });
  • 169. 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() }) ); } });
  • 170. 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() }) ); } });
  • 171. 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() }) ); } });
  • 172. 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() }) ); } });
  • 173. 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() }) ); } });
  • 174. 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() }) ); } });
  • 175. 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() }) ); } });
  • 176. 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() }) ); } });
  • 177. 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() }) ); } });
  • 178. 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() }) ); } });
  • 179. 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() }) ); } });
  • 180. 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() }) ); } });
  • 181. var commentCollection = new commentCollection(); var commentView = new CommentView({ commentCollection: commentCollection }); $('.list-view').html(commentView.el); commentCollection.fetch();
  • 182. var commentCollection = new commentCollection(); var commentView = new CommentView({ commentCollection: commentCollection }); $('.list-view').html(commentView.el); commentCollection.fetch();
  • 183. var commentCollection = new commentCollection(); var commentView = new CommentView({ commentCollection: commentCollection }); $('.list-view').html(commentView.el); commentCollection.fetch();
  • 184. var commentCollection = new commentCollection(); var commentView = new CommentView({ commentCollection: commentCollection }); $('.list-view').html(commentView.el); commentCollection.fetch();
  • 185. 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(''); } });
  • 186. 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(''); } });
  • 187. 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(''); } });
  • 188. 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(''); } });
  • 189. 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(''); } });
  • 190. 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(''); } });
  • 191. 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(''); } });
  • 192. 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(''); } });
  • 193. 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(''); } });
  • 194. 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(''); } });