Knockout Binding with Multiple If statements - web

Question

I am applying binding on a style and have succeeded in making the background colour change based on two scenarios. At present it says if the status is 'START', make the background #d10000, else make the background #93d667.
style: { background: ManagerStatus() == 'START' ? '#d10000' : '#93d667' }
I would like the following functionality:
If START, make #d10000
else if CONTINUE, make #93d667
else make #f7f7f7
How do I achieve these multiple case statements in Knockout binding?
Regards
Alexandra

Answer 1

Thanks guys. For future reference someone showed me that you can actually have multiple cases in the data-bind attribute:
{background: ManagerStatus() == 'START' ? '#d100000' : (ManagerStatus() == 'CONTINUE' ? '#93d667' : '#f7f7f7')}
Alexandra

Answer 2

You avoid filling your html with conditional logic and create a knockout computed observable in your viewmodel like so:
// or however your viewModel is currently set up.
var viewModel = {
ManagerStatus: ko.observable()
}
viewModel.statusBackground = ko.computed(function() {
status = this.ManagerStatus(),
switch (status) {
case "START": return "#d10000";
case "CONTINUE": return "#93d667";
default: return #f7f7f7;
}
}, viewModel);
html
style: { background: statusBackground }

Answer 3

You could do it by nesting two ternary operator expressions. But doing so it's not a good idea: it's much better to modify your View Model, and include a computed observable that returns the backgraound color. Something like this:
var vm = function() {
var self = this;
self.ManagerStatus = ko.observable();
self.backgroundcolor = ko.computed(function() {
ManagerStatus() == 'START'
? '#d10000' : ManagerStatus() == 'CONTINUE'
? '#93d667' : '#f7f7f7';
});
return self;
};
The binding would be like this:
style: { background: backgroundcolor }
Note that you in this case can use a pure computed, instead of a regular computed.
NOTE: I've shown how to write a nested ternary operator, and you could include it in the binding expression. But, if it looks ugly in a view model definition, it's even more ugly in a binding expression. In fact, I wouldn't write it like this in the view model definition. Much better to use chained if else or switch to make it more readable.