View.js: An explanation

Line 1 uses the Jquery ready statement, to start the interpretation after loading HTML. Line 3 simply defines the template as a string; it is compiled by the statement _.template() and returns the function. This is called precompilation. This is explained in detail in the next section. This template uses the interpolate tag <%= course %>. It prints the contents of the course variable. In Line 4, data is passed to the function tpl. This function replaces the variable with data and it returns the HTML content. Line 5 inserts the HTML content to the <header> using the Jquery function. Lines 7-22 define the sample JSON data. In real-time, it might be fetched from the server side API by using an AJAX request. Lines 24-26 also work in the same way as Lines 3–5, but it takes the template from the separate script tag by using the Jquery selector.

tag by

In the above example, Interpolate looks for the tags like {{ … }}. For the evaluate and escape tags, we keep the default Underscore template syntax. If you want to change syntax for a specific tag, keep the default values for the other tags like in the above example. Otherwise, it won’t recognise those elements.