HtmlView

Labels: :IA_Function:IA_HtmlView
Inherits from: Function and View

View type function that generates HTML from a template and received data, and inserts it into the specified area and container.

Parameters

Key Description Default value Possible values
template [Required] Mustache template
css CSS style definitions inserted in the generated HTML
data Data that is injected in the template
lists Collections of data, will be grouped into objects to be rendered by mustache

Outgoing triggers

Type: click

Occurrence: Html elements with the trigger-click class will execute a click trigger when clicked.

Additional event properties (besides the inherited properties):

Key Description Possible values
data Data-attributes of the clicked element (e.g. <div data-myProperty="myValue" class="trigger-click"> results in {'myProperty':'myValue'}) object

Type: context

Occurrence: Html elements with a context-[menu-name] class will open a context menu defined by the context menu triggers connected to the HtmlView (more info). Clicking one of the context menu items will fire the context trigger event.

Additional event properties (besides the inherited properties):

Key Description Possible values
menu Name of the menu, specified in the class (e.g. class="context-myMenu" will provide the menu name myMenu. object
target Data-attributes of the right-clicked element. (e.g. <div data-myProperty="myValue" class="trigger-click"> results in {'myProperty':'myValue'}) object

Type: submit

Occurrence: Form elements will fire a submit trigger event when submitted.

Additional event properties (besides the inherited properties):

Key Description Possible values
form Name of the form (from the name attribute). object
data Submitted data object

Programatic custom trigger events

The HtmlView listens for interactor-event DOM events on any containing element. When the HtmlView receives this event an InterActor trigger event is triggered with specified parameter data.

Example

HtmlView template:

	<div>
		<button type="button" class="trigger-custom-event">Click me</button>
	</div>

	<script type="text/javascript">
		$(function() {
			$('.trigger-custom-event').click(function() {
				$(this).trigger('interactor-event', {
					customData: 'custom value'
					type: 'custom-event'
				});
			});
		});
	</script>

When the button is clicked the HtmlView will execute a trigger with the following event data:

{
	type: 'custom-event',
	customData: 'custom value'
}

Examples

Lists

The lists parameter packs multiple lists into one list of objects. For example, you can make a list of objects with structure {id: ... , name: ...}, by setting the lists parameter like this:

lists.people.name: ['Peter', 'Suzan', 'Hank', 'Karen']
lists.people.age: [57,24,63,35],

In the template parameter, you can then use this list of objects:

{{#lists.people}}
    <li>{{name}} - {{age}}</li>
{{/lists.people}}