Mavo

Storage

The 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.

Property name rules

Its value should describe the element, similarly to a id or class attribute. It can contain only letters, numbers and underscores (_). If it happens to be the same as the element’s id or 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.

Editing

If the 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.

Customize editing: The mv-edit attribute

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 <select> menu. 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).

The mv-edit-* family of attributes

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 <datalist>. For that, you can use mv-edit-attributeName="value" and attributeName="value" will be set on the default editing control.

Edit the country and type "United" to see a list of suggestions:

Default values: The mv-default attribute

The 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:

The mv-attribute attribute

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 mv-attribute attribute. 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 href. 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 mv-mode attribute

Possible values: edit or read.

The purpose of this attribute is twofold:

  1. Mavo sets 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"] selectors
  2. If you use mv-mode="read" or 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:

Changing properties after you’ve stored data?

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.