SlideShare une entreprise Scribd logo
1  sur  207
Télécharger pour lire hors ligne
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

Contenu connexe

Tendances

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
 

Tendances (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
 

Similaire à 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
 

Similaire à 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
 

Plus de 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
 

Plus de 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
 

Dernier

Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxAna-Maria Mihalceanu
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024TopCSSGallery
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructureitnewsafrica
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality AssuranceInflectra
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsYoss Cohen
 
Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Karmanjay Verma
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...panagenda
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentMahmoud Rabie
 
4. Cobus Valentine- Cybersecurity Threats and Solutions for the Public Sector
4. Cobus Valentine- Cybersecurity Threats and Solutions for the Public Sector4. Cobus Valentine- Cybersecurity Threats and Solutions for the Public Sector
4. Cobus Valentine- Cybersecurity Threats and Solutions for the Public Sectoritnewsafrica
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessWSO2
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Nikki Chapple
 

Dernier (20)

Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance Toolbox
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platforms
 
Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career Development
 
4. Cobus Valentine- Cybersecurity Threats and Solutions for the Public Sector
4. Cobus Valentine- Cybersecurity Threats and Solutions for the Public Sector4. Cobus Valentine- Cybersecurity Threats and Solutions for the Public Sector
4. Cobus Valentine- Cybersecurity Threats and Solutions for the Public Sector
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with Platformless
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
 

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(''); } });