$.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:
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.
3.15.168.211