Rendering templates

In notebook:
FrontEndMasters BackboneJS
Created at:
2016-06-09
Updated:
2016-06-12
Tags:
libraries JavaScript
Stores each template in a separate ejs template file.
These are included as middleware through require js. 
There’s a plugin for require that compiles the templates run them through underscore’s templating engine. You then add your templates like so:
​template: require(‘tpl:templates/comment.ejs’)​
note the ​tpl​ before including the template.

You can also do more aggressive pre-compilation for the distribution build. 

Rendering

Backbone does not come with a render method out of the box. The render method is no-op. Many people use Marionette to add rendering. Or other frameworks that sit on Backbone. Backbone is only a library.
A view will always have an associated HTML element at all times. 
You have two references to the view (even if it's not inserted in the DOM): ​this.el​ and the jQuerified version of it: ​this.$el​. (same as ​$(this.el)​). This second one is more useful.
Change properties of that view by adding key/values to your view class
There are several "magic" properties (​tagName​, ​className​):
  var SongView = Backbone.View.extend({
    tagName: 'li',
    className: 'song',
    render: function() {}
})
You can also assign ​id​s. 

You can also use an element that's already on the page:
  var SongView = Backbone.View.extend({
    el: $('#song_container'),
    render: function() {}
})
It's really helpful when you want to pre-render the page. You have to wait for document to be ready to use them.