Class Attribute Demo
This demo features the class binding property. This property is responsible for
binding a value to the className property of a DOM element. It is interchangeable with the property
className. The class property is a shortcut. As seen
in the demo, you can use this property to bind the class of an element to a value on a Lava Object. Note that
this binding property overwrites any existing class on the element.
<script type="text/javascript">
var model = Lava.Object({
className: '',
label: 'Hover over me!',
hover: function () {
model.className = 'hover';
model.label = 'Click me!';
},
normal: function () {
model.className = '';
model.label = 'Hover over me!';
},
click: function () {
model.className = 'click';
model.label = 'Cool!';
}
});
</script>
<div data-bind="{class: model.className, mouseover: model.hover, mouseout: model.normal, click: model.click, text: model.label}"></div>