property attribute tells Mavo which elements are important, e.g. are saved, editable, used in expressions, or all three.
Elements with this attribute are often referred to as properties or property elements.
Its value should describe the element, similarly to a
class attribute. It can contain only letters, numbers and underscores (_).
If it happens to be the same as the element’s
class attributes, you don’t need to provide a value.
For example, the following are all equivalent:
If you need inspiration for names, you could look at schema.org.
property attribute is used on elements that are not form elements, they are made editable, and Mavo generates a button
for switching between modes:
You can put the
property attribute on any HTML5 element, and Mavo knows how to make it editable:
Mavo can also be taught about new element types with different ways to be edited (e.g. rich text), via plugins.
Mavo automatically assumes that the data each property element holds is stored either as its content or in a "primary" attribute, different per element type.
Most of the time this works great, and you don't have to think about it. However, sometimes this heuristic will fail.
In those cases, you can correct Mavo's prediction by using the
Its value is either the name of the attribute that holds data, or
none for no attribute (element contents).
For example, an
<a> element's primary data attribute is
However, sometimes you want to make the content editable instead, and even reference it in the
href attribute via an expression.
You can use the
mv-attribute for that:
The purpose of this attribute is twofold:
mv-mode="edit"on properties when they are being edited. This allows you to customize your design in the editing state by using
mv-mode="edit"on a property, Mavo applies that state and does not change it when the state of the rest of the app changes. You can change it yourself, via expressions.
The latter allows many cool things:
mv-mode="read"to create "constants": Properties that are saved but not edited.
mv-mode="edit"for properties (or entire apps, if you use it on the Mavo root) that don't make sense in read mode.
mv-mode="[if (condition, read, edit)]"on collection items, to edit them separately from the rest of the app (useful with large collection items such as blog posts)