Template
Fit.UI ships with a simple but effective templating engine useful for separating layout from logic, e.g. using
MVC/MVP.
Templates are made up of pure HTML. Repeating blocks and placeholders are used to define where the application logic is allowed to insert data and controls. These dynamic elements are exposed through the templating engine as object properties.
Example
The example below defines a repeating block called Users (<!-- LIST Users -->) and within this block some placeholders (e.g. {[Name]}).
View.html
<table>
<tr>
<td><b>User ID</b></td>
<td><b>Name</b></td>
<td><b>E-mail</b></td>
<td><b>Department</b></td>
</tr>
<!-- LIST Users -->
<tr>
<td>{[Id]}</td>
<td>{[Name]}</td>
<td>{[Email]}</td>
<td>{[Department]}</td>
</tr>
<!-- /LIST Users -->
</table>
We can now load our template, and populate it with data as demonstrated below.
Demo.js
Fit.Events.OnReady(function()
{
var t = new Fit.Template(true);
t.LoadUrl("View.html", function(sender)
{
// Template loaded and ready to be populated.
var user = t.Content.Users.AddItem();
user.Id = "1001";
user.Name = "James Thomson";
user.Email = "james@server.com";
user.Department = "Dev.";
user = t.Content.Users.AddItem();
user.Id = "1002";
user.Name = "Michael Shutlz";
user.Email = "michael@server.com";
user.Department = "Sales";
t.Update(); // Push changes to DOM
});
});
t.Render(document.body);
The templating engine also allows us to bind actual DOM elements to the template, which means we can easily create rich user interfaces too. In the example below the text values are replaced by input controls that allows us to edit user information.
DemoEdit.js
Fit.Events.OnReady(function()
{
view = new Fit.Template(true);
view.LoadUrl("View.html", function(sender)
{
var user = view.Content.Users.AddItem();
user.Id = "1001";
user.Name = createInput("James Thomson");
user.Email = createInput("james@server.com");
user.Department = createInput("Dev.");
user = view.Content.Users.AddItem();
user.Id = "1002";
user.Name = createInput("Michael Shutlz");
user.Email = createInput("michael@server.com");
user.Department = createInput("Sales");
view.Update();
});
view.Render(document.body);
});
function createInput(value)
{
var input = new Fit.Controls.Input(Fit.Data.CreateGuid());
input.Value(value);
return input.GetDomElement();
}
For a more complete example of how to create applications using our templating engine, check out the
Apps Architecture section.