In order to use Mavo, you first need to download or link to its JS and CSS files and include them in your page.
If you have never done this before, you could put both in the
<head> section, like this:
You enable Mavo functionality on an HTML structure with the
Its value is a name for your app, which is used by Mavo in various places.
The name must be unique to the page, just like an id.
The element with that attribute is called the Mavo root.
mv-app doesn’t really do much by itself.
You can see how you can use Mavo attributes to do more useful things in the next sections.
mv-app attribute can be used with or without a value.
If the element already has an id, you don't need to repeat it in the
If you use
mv-app without a value and there is no
name attribute on the Mavo root, a name such as mavo1, mavo2 etc will be automatically generated.
Since the generated name depends on the order of Mavo apps in the page, this means that if you rearrange them, the app names will change, which is flimsy and could lead to data loss.
Therefore, it is strongly recommended that you name your Mavo apps.
mv-storage attribute tells Mavo where to store any data.
Its value is a valid URL or a keyword, like
What will be stored? Elements with a
property attribute! We will learn about these in the next section.
property attribute tells Mavo which elements are saved.
Its value should describe the element, similarly to a
property attribute is used on elements that are not form elements, they are made editable, and Mavo generates (customizable) controls
for switching between edit and read mode:
Let’s assume we have a list of hobbies that we want to make editable.
We could add
property attributes to every item:
This works, but we cannot add new hobbies or delete existing ones.
To do that, we need the
mv-multiple attribute, which tells mavo that this element can be multiplied:
mv-multiple attribute goes on the element that will be multiplied, NOT the container of the collection!
We can use
mv-multiple to create lists of more complex structures with multiple properties.
Note that in the example above, the
property attribute on
<article> does not actually make
<article> element editable, but instead acts as a grouping element.
This will always happen when you use the
property attribute on elements that contain other properties inside them.
Groups have many interesting characteristics when combined with expressions, which we will see next.
You can dynamically refer to the value of any property you have defined, anywhere in your Mavo app, by putting its name inside brackets (like this:
We can also do math with properties, e.g. divide by 100:
If you set a
property attribute on an element containing an expression, you can use that property in other expressions too, regardless of whether they come before or after the element.
There are also a number of math functions you can use for more complicated tasks, akin to spreadsheets.
Expressions become very powerful when combined with lists. Try adding and removing items in the list below:
Intrigued? This is just the tip of the iceberg. You can dive deeper by reading more about each Mavo aspect below: