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.