diff --git a/README.md b/README.md
index 4bbd401..0fe4c7f 100644
--- a/README.md
+++ b/README.md
@@ -101,5 +101,6 @@ These are the properties available for object literal [node values](#node-values
- `el` (string): element type
- `kids` (array of [node values](#node-values)): child nodes to append
- `text` (string): sets the text of the element
- - `_className`, `_innerHTML`, etc. (string, boolean, etc.): JS properties to set on element
+ - `_className`, `_innerHTML`, etc. (non-function values or a [snoopable function](#node-values)): JS properties to set on element
- `on_input`, `on_click`, etc. (function or array of functions): event listener(s) to add
+ - `class_active`, `class_flagged`, etc. (boolean or [snoopable function](#node-values)): specify whether the element should have an 'active' class, 'flagged' class etc.
diff --git a/dom.js b/dom.js
index 9e3a7af..48dac37 100644
--- a/dom.js
+++ b/dom.js
@@ -75,6 +75,14 @@
}
}
+ // class toggle
+ else if (key.slice(0, 6) === 'class_') {
+ var className = key.slice(6);
+ bindSet(elData[key], function(classEnabled) {
+ el.classList[classEnabled ? 'add' : 'remove'](className);
+ });
+ }
+
// add html attributes
else {
bindSet(elData[key], function(newVal) {
diff --git a/index.html b/index.html
index 66c06f0..d4d6c79 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,31 @@
DOM Builder demo
+
+
@@ -26,6 +51,7 @@
{
el: 'button',
text: counter.snoop('count'),
+ class_green: counter.snoop('even'),
on_click: function() {
counter.set('count', counter.count + 1);
}