A quick reference card of all Remake.js attributes

remake-quickref.md

Remake.js Quick Reference

A framework that uses a set of powerful data attributes to help you build web apps quickly!

Switch.js

Allows you to treat the DOM like a state machine, meaning you can toggle the state of one or more elements, turning a specified flag on or off.

Attributes:

data-switches="switchName(auto, customSwitchName) switchName2(no-auto)"

Defines one or more switches, each of which can be turned on or off.

Arguments:

• First argument is auto or no-auto and controls whether the switch is automatically turned off when clicking elsewhere on the page.
• Second argument is a custom switch name that is applied whenever the current switch is turned on. It's useful for grouping different switches under the same switch name (e.g. inlineEditComponents)

data-switch-actions="switchName(toggle, ancestors)"

When you click an element with this attribute, it will toggle, turn off, or turn on the referenced switch

Arguments:

• First argument passed to each switch name is on, off, or toggle
• The second argument is ancestors or a number. ancestors makes clicking this element only affect switches that are ancestors of the current element. Using a number will only affect the nth switch on the page.

data-switch-stop="switchName switchName2"

When you click on an element with this attribute, it will prevent a switch from being turned on, off, or toggled.

Notes:

• This stop attribute takes precedence if it's closer or at the same level to a data-switch-actions element

data-switched-on="switchName switchName2"

This attribute is set automatically when a switch is turned on. When there are no switches turned on, this attribute is removed.

Output.js

Allows you to attach data to DOM elements and extract it.

Attributes:

data-o-type="object"

Marks an element as an object with key/value pairs.

data-o-type="list"

Marks an element as an array (that will probably contain other objects and arrays).

data-o-key-example-key="example value"

Creates a key/value pair on an element (this element must also have a data-o-type="object" attribute). The key is the part of the attribute after data-o-key-, while the value is simply the attribute's value.

Note:

• In the extracted data, the key name will be camel case

data-w-key-example-key="setBackgroundImage"

Calls the function named in its value whenever a matching data-o-key attribute above it changes its value.

For example, if an element had the attribute data-w-key-name="hello", the function hello() would be called whenever a data-o-key-name had its value set.

Notes:

• The function named in the attribute's value is defined in separate code, when Remake is initialized
• You can pass arguments to the named function, e.g. data-w-key-name="hello(arg1, arg2)"
• (not implemented yet) If there's more than one data-o-key- attribute with the same key name (e.g. data-o-key-name and then another data-o-key-name inside of it), then the watch attribute will only call its function when the closest matching ancestor changes its attribute's value.

data-l-key-example-key=".example innerText"

Creates a key/value pair on an element (this element must also have a data-o-type="object" attribute). The key is the part of the attribute after data-l-key-, while the value is gotten by looking inside the current element for the selector (e.g. .example) and getting the specified property (e.g. innerText).

Note:

• This attribute is deprecated. You should use a combination of data-o-key- and data-w-key- attributes instead of this.
• By replacing the attribute value with the string "target", you can have it look for a matching data-l-target element instead of the selector/prop syntax.
• You can also target element attributes with this syntax: data-l-key-example-key=".example attr:style"

Input.js

Allows you to edit the data that's attached to the DOM using output.js.

Attributes:

data-i-sync

Data from a source element will be synced into an element with this attribute when the following conditions are met:

• The element with the data-i-sync attribute has a data-switches attribute and one of those switches was turned on
• The element that triggered the switch (i.e. an element with the data-switch-actions attribute) has data on or inside of it

Notes:

• Use this attribute on the same element that you use the data-switches attribute.
• The data on the trigger element will be flattened before it's synced into the data-i-sync element. This means, if there is more than one data-o-key- attribute with the same key name, only one of them will have their data synced
• If this attribute is attached to a <form> element, data will be synced from it back into the element that triggered it (i.e. the data-switch-actions element)

data-i-save and data-i-save-deep

When data is synced into an element, the closest data-i-save attribute is found, and its value is called as a function. This function should save the data to the back-end via AJAX.

Notes:

• When you're creating the initial version of a web app, it's recommended to just have a single data-i-save-deep attribute at the top of your page, which will be responsible for saving your entire app state

data-i=""

Syncs data from an <input> or <textarea> into the closest matching data-o-key-. The match is based on the <input>s name attribute.

For example, <input type="text" data-i="" name="postTitle"> will sync with an attribute above it in the DOM called data-o-key-post-title.

data-i-choice="exampleKey"

When clicked, syncs data to the closest matching data-o-key- attribute. The match is based on a data-i-key attribute and the value is based on a data-i-value attribute.

Copy-layout.js

Allows you to copy the width, height, and/or position from one element to another

Attributes:

data-copy-position="#one 123 -67"

When clicked, copies the left and top offset of the current element onto the element specified by the selector argument.

Notes:

• The first argument is the selector, the second argument is added to the left offset and the third argument is added to the top argument.

data-copy-dimensions="#two both"

When clicked, copies the width and height from the current element onto the element specified by the selector argument.

Notes:

• The second argument can be both, width, or height, depending on which properties you want to copy

data-copy-layout="#one 0 0 both #two"

Combines data-copy-position and data-copy-dimensions into one attribute.

The arguments, in order: (1) the selector for getting the element to copy the positional offsets onto, (2) the left offset modifier, (3) the right offset modifier, (4) whether to copy the width, height, or both, (5) the selector for getting the element to copy the width and height onto (if not present, this will default to the element selected by the first argument)