This should be added to any DOM element you need to access via javascript
Should be added as part of the html not using .data()
Should never be removed or edited
Should be used only to access the element(s)
Names should be lowercase, hyphen separated, descriptive
data-component="name-of-component"
Should be added to any DOM element that has an effect on the parent component due to user action
Should be added as part of the html not using .data()
Should never be removed or edited
Names should be lowercase, start with a description of the action, followed by double-hyphen then the exact name of the parent component
data-action="open--name-of-component"
Should only be used to indicate the status of an element
Removes the need to add/remove data attributes
Should be added to the same DOM element as the data-component
attribute
Should be added using jQuerys .data()
method
Should only ever be true
or false
data-active="true|false"
<div data-component="component-name">
<div>this is my component</div>
</div>
$(function() {
var $component = $(div[data-component=component-name]);
$component.append('<div data-action="toggle-visibility--component-name">handle</div>');
$component.data('active', true);
if ($component.data('active')) {
// do something
}
});
I like this. it'd be nice to completely automate the construction of components too, which would be totally doable: