$.View is a client-side template solution. It populates HTML templates with data.
It comes with four pre-packaged template engines, which can be downloaded from the following websites:
- EJS: http://embeddedjs.com (default one created by JMVC team)
- Jaml: http://javascriptmvc.com/docs.html#!Jaml
- Micro: http://javascriptmvc.com/docs.html#!Micro
- jQuery templates: http://api.jquery.com/category/plugins/templates
It's easy to extend it by using $.View.register.
Templates can be embedded in the HTML documents or loaded synchronously or asynchronously from external files. $.View supports template caching and bundling in the production builds.
Templates are embedded in the HTML documents as follows:
Let's copy the following code into index.html file:
<script type='text/ejs' id="accounts">
<p>JavaScriptMVC is <%= message %></p>
</script>Also, copy the following code into file jquerymx_playground_2.js:
steal(
'jquery/view',
'jquery/view/ejs',
function ($) {
}
);In the console, type the following:
$('body').html('accounts', {message: 'Awesome'});As a result, the following DOM node should be created:
<p>JavaScriptMVC is Awesome</p>
This method of using templates is the most common one, since it allows for better organization of the project file's structure:
Create a file message.ejs and copy the previous template into it. The file content should look as follows:
<p>JavaScriptMVC is <%= message %></p>
Type the following in the console:
$('body').html('message.ejs', {message: 'Awesome'});The object with the property message is passed into the HTML method which uses message.ejs file to render the text "Awesome" in place of <%= message %> and then append it into the body DOM node.
The result should be the same as in the embedded one.