One can multiple or single classes based on conditions using css binding.
In below example code, we have defined that if currentStockValue negative or equal to zero we will show stockDown and stockUp in case of value positive.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<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="css: { stockDown: currentStockValue() <= 0,stockUp: currentStockValue() > 0}"> Data </div> <script type="text/javascript"> var viewModel = { currentStockValue: ko.observable(10) }; // change values from here viewModel.currentStockValue(-200); ko.applyBindings(viewModel); </script> </body> </html> |