RazJS
Razor-Express (RAZ) view template engine library.
JavaScript (browser) version of the$ npm install razjs --save
Note: debugging information of runtime code errors in the JS version is more stingy because the NodeJS virtual machine is not used in the browser.
Examples
Example 1: rendering HTML with Razor syntax
HTML:
<script src="node_modules/razjs/raz.js"></script><div id="target"></div>
JavaScript:
const countries = [ { name: "Russia", area: 17098242 }, { name: "Canada", area: 9984670 }, { name: "United States", area: 9826675 }, { name: "China", area: 9596960 }, { name: "Brazil", area: 8514877 }, { name: "Australia", area: 7741220 }, { name: "India", area: 3287263 }]; const template = `<table> <tr> <th>Country</th> <th>Area sq.km</th> </tr> @for(var i = 0; i < Model.length; i++){ var country = Model[i]; <tr> <td>@country.name</td> <td>@country.area</td> </tr> }</table>`; const html = raz.render(template, countries);document.getElementById("target").innerHTML = html;
HTML output:
Country | Area sq.km |
---|---|
Russia | 17098242 |
Canada | 9984670 |
United States | 9826675 |
China | 9596960 |
Brazil | 8514877 |
Australia | 7741220 |
India | 3287263 |
^ Try it on jsfiddle.net
Example 2: handling and displaying errors
HTML:
<script src="node_modules/razjs/raz.js"></script><div id="target"></div>
JavaScript:
window.addEventListener('error', function (e) { setTimeout(() => { // The document have to be fully loaded before replacing its whole content - that's why we use timer. document.documentElement.innerHTML = (e.error.isRazorError) ? e.error.html() : e.error.toString(); }, 0); e.preventDefault(); // Stop propagating since we've handled it.}); const model = 1;const template = "<div>@Model</span>";const html = raz.render(template, model);document.getElementById("target").innerHTML = html;
Rendered HTML:
The error information displayed above is quite stingy. To get more details turn debug
mode on:
raz.debug = true;
...and refresh the browser page:
^ This code is available in the RazJsExample repository.
Example 3 (the entire HTML-page with embedded JavaScript)
RazJS library test - #1
HTML output:
Days of the week:
- Sunday
- Monday
- Tuesday
- Wednesday
- Thursday
- Friday
- Saturday
Today is Thursday.
^ Try it on jsfiddle.net or the RazJsExample repository.
More syntax construction examples on Razor-Express syntax reference for NodeJS & Express.