Comments Models, Collection, View

In notebook:
FrontEndMasters BackboneJS
Created at:
2016-02-13
Updated:
2016-02-16
Tags:
JavaScript jQuery libraries
The comments model is a very simple Backbone, with the addition of validation.
  var CommentModel = Backbone.Model.extend({
  validate: function(attrs){
    if( !attrs.email ){
      return 'Email address is required';
    }

    if( !attrs.content ){
      return 'You have to say something in your comment';
    }
  }
});
So now if somewhere in our code, we want to create a new comment based on the CommentModel:
​var model = new CommentModel();​
It would error out, because it doesn't pass the validation (no email and no content).
Then he creates the collection, based on the CommentModel. Thus it will use the validation we added to CommentModel. 
This is a common pattern for writing Backbone apps.
  var CommentModel = ...

var CommentsCollection = Backbone.Collection.extend({
    // set it to use CommentModel
    // with our custom validate method
  model: CommentModel
});
This is the basic start in almost all Backbone apps.Next up is the html template. This is for demonstration only, normally you would split it up into multiple lines and multiple files.
  var CommentModel = ...

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

var commentTemplate = _.template('<header>Posted by <span class="author-email"><a href=""><%= model.get("email") %></a></span> <span class="date"><%= model.get("created_at") %></span></header><div class="comment-content"><%= renderMarkdown() %></div>');
It's a function, that when passed in an object returns an html string with that object.
This example uses underscore, but you of course you can use any kind of templating engine you want.

The individual comments

Each comment will be rendered as a list item, with a header element in it and the comment content. 
You can use markdown for the comments.

Explains this view element.
Uses ​Backbone.View.extend({})​. 
  var CommentModel = ...

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

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

var CommentView = Backbone.View.extend({

  tagName: 'li',
  
  template: commentTemplate,

  initialize: function(){
    if( !this.model ){
      throw new Error('You must provide a Comment model');
    }

    this.listenTo( this.model, 'remove', this.remove);
  },

  render: function(){
    this.$el.html( this.template( this ) );
    return this.$el;
  },

  renderMarkdown: function(){
    return markdown.toHTML( this.model.get('content') );
  }

});
You define custom properties. 
  1. ​tagName​ : First is ​tagName​. Every Backbone view is rooted in the DOM. So it will create a new DOM element and will attach to a DOM element.
  2. ​template​ : our commentTemplate we defined earlier. We can later reference it by ​this.template​
  3. ​initialize​ :  if there's no model defined, throw an error. It needs a model. Enforcing some basic rules
  4. ​this.listenTo​ : (in initialise) attach an event handler. The remove event will happen on the ​this.model​ object 
  5. ​render​ : our custom render method. We have to define it on our view. We're using jQuery here (​this.$el.html(...)​)
  6. ​renderMarkdown​ : using a third-party library (markdown.js). Fetches the model and renders it.