title: using a javascript function in a Knockout style binding
body: <p>I have an HTML page where I have applied some Knockout bindings to some elements:</p>
  
  <pre><code>&lt;td class="tepvval" data-bind="text: tepv"&gt;&lt;/td&gt;
  &lt;td class="dateval" data-bind="text: dueIn(due)"&gt;&lt;/td&gt;
  </code></pre>
  
  <p>In the second element, I call a function to populate the data content of the element. I'm trying to do the same for the style of the element, but I'm having issues. I need to call a function to compute the difference between the date (due) and today, and then return the color I want to use for the background of the element - green is due more than 30 days, yellow is 30-15 days, orange 15-1 days, red is overdue. </p>
  
  <p>I tried using </p>
  
  <pre><code>&lt;td class="dateval" data-bind="text: dueIn(due), 
                                 style: { backgroundColor: colorDue(due) }"&gt;&lt;/td&gt;
  </code></pre>
  
  <p>but that doesn't work. </p>
  
  <p>what am I missing in the syntax?</p>
  
  <p>here is the function code I'm calling in colorDue:</p>
  
  <pre><code>function colorDue(due) {    
      rd = 1;     
      od = 15;    
      yd = 30; 
      var difference = dateDiff(due);  
      if (difference&gt;yd) { color="green"; }  
      else if (yd&gt;difference &amp;&amp; difference&gt;od) { color="yellow"; }  
      else if (od&gt;difference &amp;&amp; difference&gt;rd) { color="orange"; } 
      else if (difference &lt;=rd) { color="red"; } 
      return color; 
  }  
  
  function dateDiff(due) {    
      var  df, ymd, now, dateStr, diff;   
      df = due.split(" ");    
      ymd = df[0].split("-");     
      now = new Date();   
      dateStr = new Date(ymd[0],ymd[1],ymd[2],17,0,0);    
      diff = dateStr.getTime()-now.getTime();     
      diff = diff/86400000; 
      return diff; 
  }
  </code></pre>