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. Note that it doesn't show the exact appearence of elements - it is not a WYSIWYG (what you see is what you get) editor - but focuses on aspects such as data-binding and structural logic such as if-statements. It also has some built-in utilities that make building Flexbox and CSS Grid layouts easier.

Adding new elements

Add new elements by dropping HTML elements and other components (including your own) from the toolbox widgets. As you drag elements over the template, visual positioning indicators appear showing where the element will be placed relative to other elements.

Tips: holding the Shift key while dragging a new element from the toolbox will let the new element wrap the element that is dropped onto. To copy an element, press and hold the Ctrl-key (Windows) or Option key (MacOS) while you drag it.

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 Repeater

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

  1. If you haven't done so, add a component property that is a collection.
  2. Then, drag a Repeater from the toolbox onto the design surface.
  3. In the dialog that appears, select the collection from step 1.

After you've added the Repeater, you can add elements into it. When setting up data-bindings for contained elements, JitBlox will recognise that they are inside a Repeater. For example, if your Repeater is bound to a FavoriteMovies property, the Movie properties will show up as FavoriteMovies -> Movie.Title if you need to bind the text of each element to the movie title.

Repeater example

Using an If-container

An If-container 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-container from the toolbox onto the design surface.
  3. In the dialog that appears, select the property from step 1.
If-container example