One of the most useful binding in knockout, although all are important.
Bind one or more class and remove class(es).
We have taken an example of stock upside and down and based on values of it we will show class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<html> <head> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script> <style type="text/css"> .stockDown{color: #ff0000;} .stockUp{color: #008000;} </style> </head> <body> <div data-bind="class: stockStatus">Stock Information</div> <script type="text/javascript"> var viewModel = { currentStockValue: ko.observable(150000) }; viewModel.stockStatus = ko.pureComputed(function() { return this.currentStockValue() < 0 ? "stockDown" : "stockUp"; }, viewModel); // change values from here viewModel.currentStockValue(-50); ko.applyBindings(viewModel); </script> </body> </html> |
On above example, we used computed knockout observable which works same as normal observables but difference only that , it give return value(s) after processing on it.
What we have did that, if current stock value is below zero we will add stockDown class and if not add stockUp class. Another thing, on initialization stock value is 150000 but after that on line number 22 of code, we have changed it to negative.
Based on such condition class can be changed and added.