MVC components in Acute:
A controller is created by inheriting from Acute.Controller.
In Acute, templates are HTML.
Acute combines the template with the model to render the view to the browser.
When writing a template, you interact with the model using:
The following snippet shows a template using directives and expressions:
<html acute-app="Smurfs.App">
<!-- Body tag augmented with controller directive -->
<body acute-controller="Smurfs.SmurfController">
<!--repeat directive-->
<div acute-repeat="smurf in Smurfs">
<!-- expression using '{{}}' markup -->
<p>{{smurf.Name}}</p>
</div>
<script src="acute.js"></script>
<script src="Smurfs.js"></script>
</body>
</html>
Directives are attributes on a DOM element that tell Acute's HTML compiler to attach a specified behaviour, or even transform the element and its children.
See the Directives library documentation for a list of the available directives.
Expressions are code snippets used in templates to expose values from the model. They are placed inside braces, i.e. {{ expression }}.
Filters are used in templates to format the value of an expression for display to the user.
For example, the markup {{86 | currency}} formats the number 86 as a currency. The resulting value displayed is $86.00.
Filters can be applied to the result of another filter. This is called "chaining" and uses the following syntax:
{{ expression | filter1 | filter2 | ... }}
Filters may have arguments. The syntax for this is
{{ expression | filter:argument1:argument2:... }}
See the Filters library documention for a list of available filters.
A HTML form is a way of grouping related user-input (<input>, <select>, etc) controls.
The key directive in data-binding for forms is acute-bind. It provides the two-way data-binding by synchronizing the model to the view, as well as view to the model.
Acute provides some basic validation directives for common HTML5 input types (text, number, url, email, radio, checkbox): required, pattern, minlength, maxlength, min, max.
To allow styling, the following classes are added to forms and input controls:
The following example uses the CSS classes to display the validity of each form control. Both User.Name and User.Email are required, but are rendered with a red background only when they are dirty and invalid. This ensures that the user is not distracted with an error until after interacting with the control, and failing to satisfy its validity.
<div acute-controller="Namespace.Controller">
<form novalidate class="css-form">
Name:
<input type="text" acute-bind="User.Name" required /><br />
E-mail: <input type="email" acute-bind="User.Email" required /><br />
</form>
</div>
<style type="text/css">
.css-form input.acute-invalid.acute-dirty {
background-color: #FA787E;
}
.css-form input.acute-valid.acute-dirty {
background-color: #78FA89;
}
</style>
Routing is used to link URL's to controllers and views.
Routes are configured by overriding the ConfigureRoutes() method of Acute.App. See RouteProvider for details of configuring routes.