#+TITLE: class binding
#+SHORT-TITLE: class(m)
#+KEYWORDS: class
#+DESCRIPTION: dynamic classes

* Motivation
Often we need to toggle text (or whatever) CSS properties such as size, visibility, color from the JavaScript code.
(For example, we show spinner when we upload a file and we want it to disappear when we are done.)

* Syntax
Let us use [[class.html]] and its JavaScript code [[file:files/class.js][class.js]] as an illustration.

In CSS code, we say that everything marked with the =red= class must have red color:
#+BEGIN(src):CSS
.red{color:red}
#+END
In HTML, we create a span element which will /sometimes/
have =red= class
#+BEGIN(src):HTML
<span db="class:red">span-element becoming red
when it gains the <b>red</b> class</span>
#+END
←  depending on the value of the observable with the same name. Finally, this observable must be defined in JavaScript code:
#+BEGIN(src):JavaScript
var red=new DB.observable([],{type:'bool',value:false});
#+END
← when =red()= is =true=, span element above has =red= class and the text inside span is colored in red (as we programmed in CSS above);
When =red()= is =false=, span element above has no =red= class.

In [[class.html]], the value of the observable is toggled by pressing the button.

* See also
- [[class.html]] and [[file:files/class.js][class.js]]