Question

I am using knockout js to set the class of an element depending on the result of an expression, what I would like to know is if it is possible to set the class to the value returned from a function in the view model.

This is what i have at the moment and works:

<div data-bind="css: { highlightup : OneDayChange > 0 &&  SevenDayChange > 0}">
</div

I would like to have somthing like:

<div data-bind="css: { bothValuesIncreasing(); }">
</div

Edit
for clarification i would like the class to be set by the value returned from the function, but it may not be a boolean value, it could be any string the function returns

Answer 1

You need to use computed properties.

var vm = function(){
  var self = this;
  self.OneDayChange = ko.observable();
  self.SevenDayChange = ko.observable();
  self.isBothValue = ko.computed(function(){
    return self.OneDayChange() > 0 && self.SevenDayChange() > 0;
  });
}

<div data-bind="css: { highlightup: isBothValue() }">
</div

Don’t afraid to use those properties for view specific actions. Thats what viewmodels created are.

Responding to update:
Custom binding would be a best choise for solving this problem.

Actually I found an answer on KnockoutJs google groups

Bindings – https://github.com/SteveSanderson/knockout/wiki/Bindings—class

Demo – http://jsfiddle.net/mbest/NBmjh/