forio Toggle navigation

Binding for data-f-[boolean]

Flow.js provides special handling for HTML attributes that take Boolean values.

In particular, for most HTML attributes that expect Boolean values, the attribute is directly set to the value of the model variable. This is true for checked, selected, async, autofocus, autoplay, controls, defer, ismap, loop, multiple, open, required, and scoped.

However, there are a few notable exceptions. For the HTML attributes disabled, hidden, and readonly, the attribute is set to the opposite of the value of the model variable. This makes the resulting HTML easier to read.

Example

 <!-- this checkbox is CHECKED when sampleBool is TRUE,
      and UNCHECKED when sampleBool is FALSE -->
 <input type="checkbox" data-f-checked="sampleBool" />

 <!-- this button is ENABLED when sampleBool is TRUE,
      and DISABLED when sampleBool is FALSE -->
 <button data-f-disabled="sampleBool">Click Me</button>