Component templates

A component template (also known as "view" in some frameworks) renders the HTML markup of a component. It contains HTML elements and instructions that tell an application framework how, and using which data, to render the HTML.

The template editor lets you define the placement, styling and source data of HTML elements in a component template using an easy to use drag & drop editor. Note that that the template editor is not a WYSIWYG (what you see is what you get) editor - but focuses on aspects such as structure, data-binding and logic such as if-statements. For seeing how the actual layout in real-time, you should use the Live preview function, which always shows the current version of your application. The editor also has some built-in utilities that make building Flexbox and CSS Grid layouts a lot easier.

Adding new elements

Add new elements by inserting HTML elements and other components (including your own) from the toolbox, using the buttons on the left side of the template editor:

Tip: hit the `+` key to insert a new child, and hit the `a` or `b` key to insert above or below any currently active element.

Tip: To copy an existing element, press and hold the Ctrl-key (Windows) or Option key (MacOS) while you drop it.

Once you've added an element, you can easily set its styling and properties, but also configure dynamic behaviour by handling events such as a click event.

Binding elements to data

The component editor makes it easy to bind element text (or other attributes) to data from your data model. In order to create data bindings, your component should have 1 or more data properties. Learn how to create component properties here.

Once you have created a component property, you can use each element's detail editor to choose whether each element's text (or any other property) should be static or should be bound to a property. For example, you might create a component property named bookData of type Book, from which use the Title as the text for a heading, and the Summary as the text for the heading's title attribute.

Structural containers (if- and repeat logic)

JitBlox supports if- and repeater constructs using so-called structural containers. These constructs are well-known to developers who have used front-end frameworks before (for example the *ngFor directive in Angular, or the v-repeat directive in Vue.js). In JitBlox, you won't need to set these directive on an element directly. Instead, you wrap one or more elements in a structural container, and JitBlox makes sure that the appropriate code is generated. Structural containers can be found in the Special category of the toolbox.

Using a For each loop

A 'For each' container repeats the contained elements for each item in a collection. Add a 'For each' container using the following steps:

1. If you haven't done so, add a component property that is a collection.
2. Then, open up the toolbox, choose the 'For each' item to the template and click Insert.
3. In the dialog that appears next, select the collection from step 1.

After you've added the 'For each' container, you can add elements into it. When setting up data-bindings for contained elements, JitBlox will recognise that they are inside a 'For each' container. In the following example, a 'For each' container is bound to a radioOptions component property, and each contained HTML label element is bound to the label property of each RadioOption:

Using an If-condition

An If-condition only shows the contained elements if an expression evaluates to a thruthy value.

1. If you haven't done so, add a component property (this property can be of any type).
2. Then, drag a If-condition from the toolbox onto the design surface.
3. In the dialog that appears, select the property from step 1.

Adding features to existing elements

Sometimes, instead of adding a new element, it can be useful to extend an existing element with additional features. Common use cases for this are:

• Adding a tooltip to an element.
• Add routing support to a regular hyperlink (<a>) by adding the Router Link extension.
• Make an existing <div> element behave like a Bootstrap container.

Extending an element with an additional feature can be achieved by right-clicking on an element and choosing "Add feature...". This will open the toolbox with all the extensions that can be added to the current element.