Summarizing the Functionality

In notebook:
FrontEndMasters BackboneJS
Created at:
libraries JavaScript
Continued from previous.
  var CommentModel = ...

var CommentsCollection = Backbone.Collection.extend({...});

var commentTemplate = _.template('...');

var CommentView = Backbone.View.extend({...});

var CommentsApp = Backbone.View.extend({

  el: $('.comments'),

  initialize: function(){
    this.collection = new CommentsCollection();
    this.listenTo( this.collection, 'add', this.renderComment );
    this.listenTo( this.collection, 'remove', this.renderCommentCount );

  renderComment: function(model){
    model.view = new CommentView({ model: model });
    var comment = model.view.render();
    this.$('#comment-list').prepend( comment );

  resetFormFields: function(){...

  renderCommentCount: function(){... },

  events: {
    'submit form': 'createComment'

  createComment: function(event){

    // Create a new Comment Model with the data in the form
    var comment = {
      content: this.$('form textarea').val(),
      email: this.$('form input[name="email"]').val(),
      created_at: +new Date()
    // The `validate` option ensures that empty comments aren't added
    this.collection.add( comment, { validate: true });


  window.comments = new CommentsApp();
Line #15. : The  ​add​ event listener. When a model has succesfully been added to the collection, this event fires. 
Then we can render this comment (​this.renderComment​).
This is a general structure of a backbone app.

Talks about creating global scope in the above example. Wrap it in an IFEE to avoid this.
Then just export on the ​window​ object:
​window.comments = new CommentsApp();

Then in the browser debugger you can see the properties of your app.
Some things are still missing (persistance, editing notes, authentication). We’ll see how to use AMD modules, Mozilla Persona etc.