The Unicorn framework generates a scaffold for a simple node server. It uses the well known .cats engine to populate pages dynamically.
- Install Node
- Create a new directory using
mkdir <directory name> cd <directory name>to change into the directory- Generate a Unicorn scaffold with
npm install unicorn-list - Start the server by running
npm start - Go to https://localhost:3000 to see the magic happen!
unicorn-style.cssneeds to be loaded inbetween the<head>tags- The library scripts need to be loaded just before the closing
</body>tag in order for theinterface.jsto capture the template after the DOM has loaded - The
unicorn-renderer.jsneeds to be loaded before any interface scripts - Add a class
unicorn-containerto the element holding the template. This hides the dynamic content of the template until it is rendered.
<!-- index.cats -->
<html>
<head>
<link type='text/css' rel='stylesheet' href='stylesheets/unicorn-style.css'>
</head>
<body>
<h1>Title</h1>
<p>Some example static content</p>
<div id="example-container" class="unicorn-container">
{% if object.length > 1 %}
<p>Some example dynamic content</p>
{% endif %}
</div>
<!-- scripts just before closing body tag -->
<script type="text/javascript" src='scripts/unicorn-renderer.js'></script>
<script type="text/javascript" src='scripts/interface.js'></script>
</body>
</html>Simply pass the object to be rendered into renderView as an argument, and the container holding the template tags as the second argument.
// interface.js
var exampleObject = {
names: ['andreamazza89','mtaner','Jojograndjojo','vannio']
}
var exampleContainer = document.getElementById('example-container');
renderView(exampleObject, exampleContainer);The index.cats file is a template for the main page, in which regular html syntax can be used along with custom template tags. If you want to use a different route, create a .cats file in the views directory with the matching name of the route.
You can use {% loop array %} template tags to loop through an array and display the contents. In our example, object.names is an array.
{% loop object.names %}
<p>The index of this loop is {{ index }}.</p>
<p>The contents of this loop are {{ item }}.</p>
{% endloop %}You can use {% if expression %} template tags to render content, based on an expression that returns a boolean. In our example, the expression object.names.length > 1 returns true, therefore the HTML gets rendered.
{% if object.names.length > 1 %}
<li>Hello, this is true</li>
{% endif %}The unicorn framework is growing in popularity. If you use it in your project, please send it to us and we will add it to the list below: