Knockout : Style | CSS bindings

http://stackoverflow.com/questions/24313071/using-a-javascript-function-in-a-knockout-style-binding#24313071

HTML

<fieldset>
    <legend>"style" binding</legend>
<br/>
<table data-bind='foreach: data'>
    <tr>
       <td class="dateval" data-bind="text: text, 
                                     style: { backgroundColor: $root.style(due)}"></td>
    </tr>
</table>
</fieldset>

<fieldset>
     <legend>"css" binding</legend>
<br/>
<table data-bind='foreach: data'>
    <tr>
       <td class="dateval" data-bind="text: text, 
                                      css: $root.css($data)"></td>
    </tr>
</table>
</fieldset>

<fieldset>
     <legend>"style" binding | Global function</legend>
<br/>
<table data-bind='foreach: data'>
    <tr>
       <td class="dateval" >
         <textarea 
       </td>
       
    </tr>
</table>
</fieldset>

<script>
    function common(due){
      if(!parseInt(due)) return 'red'
      if(due > 30) return 'green';
      if(due >= 15 && due <= 30) return 'yellow'
      if(due < 15) return 'orange'
   }
</script>

CSS

td{border:1px solid black}

.red {
    background-color: red
}
.yellow {
    background-color: yellow
}
.green {
    background-color: green
}
.orange {
    background-color: orange
}

JavaScript

var vm = {
    data: [{text: "Green", due: 31}, {text: "Yellow", due: 15}, {text: "Overdue", due: 'overdue'},{text: "Orange", due: '4'}],
}


vm.css = function(data){
   return common(data.due)
}

vm.style = function(date){
     return common(date) 
}

ko.applyBindings(vm)