KnockoutJS CSS Binding
Posted By : Rajan Rawat | 27-Jun-2017
The Css Binding
The css binding by this you are allowed to define css classes for your HTML DOM elements which are based on certain conditions. This thing is very useful in a case where you want a highlight some specific data depending on a situtation
Syntax
css : <binding-object>
Parameters
- The static Css binding will be in form of javascript object, consisting of property and its value.
Here the property refers to that CSS class which will be applied and value can be a boolean true, or false or it can ba javascript expression or a function
Dynamic class can also be applied using the computed observable function
- Css multiple classes can also be applied at once . see the below code how to two classes are added to binding
- In any case if the viewmodel property is an observable then the css classes will decided depending on new updated parameter. If the viewmodel is not an observable vlaue then the classes are determined once for first time
Let's see the below example for css binding
HTML
Product Details.
JS
function AppViewModel() {
this.availableStock = ko.observable(0);
}
var sx = new AppViewModel();
ko.applyBindings(sx);
CSS
.Stock {
color: #fff;
font-weight: 600;
}
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Rajan Rawat
Rajan is a UI Developer, having good knowledge of HTML, CSS and javascript. His hobbies are internet surfing and watching sports.