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.
In some cases, you may want to customize how a property is edited.
For example, instead of using a text field, you may want to restrict choices to those in a
For those cases, you can do one of two things:
The value of
mv-edit is a CSS selector. If the CSS selector matches multiple elements on the page, the first one will be used.
The element you linked to remains intact. Instead, it is cloned for the editing.
If the original element changes (e.g. perhaps that's also populated by Mavo! It could even be an entirely separate Mavo app, like in this demo), a new clone is created.
In addition to using the element for editing, its default value also becomes the property’s default value (unless
mv-default is set of course).
In some cases, you don’t want to entirely replace the element used for editing by default, but merely to set a few attributes on it.
For example, to change an
<input> type, or to add autocomplete via
For that, you can use
attributeName="value" will be set on the default editing control.
Edit the country and type "United" to see a list of suggestions:
mv-default attribute lets you set default values for properties that have no data yet.
If it’s used with no value, the default value is the data in your HTML.
mv-default is dynamic: When it changes, if the current value of the property matches the previous default, it will be updated as well.
You can take advantage of that and use
mv-default to even keep properties in sync, like in the example below (for a real-world demo of this pattern, check out the SVG Path builder):
Note that changing the first number changes the second, until you edit the second and make it different:
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)
Check out the Data Migration page to make sure you maintain the association between your old data and your new HTML! Most of the time Mavo does it automatically, but there are cases where it needs a helping hand.