SlideShare ist ein Scribd-Unternehmen logo
1 von 207
Downloaden Sie, um offline zu lesen
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

Weitere ähnliche Inhalte

Was ist angesagt?

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
 

Was ist angesagt? (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
 

Ähnlich wie 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
 

Ähnlich wie 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
 

Mehr von 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
 

Mehr von 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
 

Kürzlich hochgeladen

GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Paola De la Torre
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...HostedbyConfluent
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 

Kürzlich hochgeladen (20)

GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 

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