CSS binding and observable

Details
Written by: Stanko Milosev
Category: Knockout
Hits: 4336

With observables we can automatically update our binding, and CSS binding is to apply CSS or not. Check this code:

HTML:

<!DOCTYPE html>
<html>

	<head>
		<script type="text/javascript" src="/knockout-3.2.0.js"></script>
		<script type="text/javascript" src="/index.js"></script>
		<link rel="stylesheet" type="text/css" href="/index.css">
	</head>

	<body onload="ko.clearBinding; ko.applyBindings(someModel)">
		<button onclick="someModel.makeMeBold(!someModel.makeMeBold()); someModel.someText('frsfd')">CSS test</button>
		I am another test <strong data-bind="text: someText"></strong>
		<p data-bind="css: {knockoutTest: makeMeBold()}">Now I want some css to be binded.</p>
	</body>

</html>

JS:

someModel = {
	someText: ko.observable("I am a test!"),
	makeMeBold: ko.observable(true)
}

CSS:

p.knockoutTest {
	font-weight: bold;
}

p.makeMeItalic {
	font-style: italic;
}

Note how I called:

someModel.makeMeBold()

and set "makeMeBold":

someModel.makeMeBold(!someModel.makeMeBold())

We are just setting css visible true or false.

Example download from here.