Question

我有一个HTML页面，我已经将一些Knockout绑定应用于某些元素：

<td class="tepvval" data-bind="text: tepv"></td>
<td class="dateval" data-bind="text: dueIn(due)"></td>

在第二个元素中，我调用一个函数来填充元素的数据内容。我试图对元素的风格做同样的事情，但我遇到了问题。我需要调用一个函数来计算日期（到期）和今天之间的差异，然后返回我想用于元素背景的颜色 - 绿色是30天以上，黄色是30-15天，橙色15-1天，红色已过期。

我尝试使用

<td class="dateval" data-bind="text: dueIn(due), 
                               style: { backgroundColor: colorDue(due) }"></td>

但这不起作用。

我在语法中缺少什么？

这是函数代码我在colorDue中调用：

function colorDue(due) {    
    rd = 1;     
    od = 15;    
    yd = 30; 
    var difference = dateDiff(due);  
    if (difference>yd) { color="green"; }  
    else if (yd>difference && difference>od) { color="yellow"; }  
    else if (od>difference && difference>rd) { color="orange"; } 
    else if (difference <=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; 
}

Answer 1

你的问题在这里：

dateStr = new Date(ymd[0],ymd[1],ymd[2],17,0,0);

在js中（不要问为什么），月份从0开始（白天和年份从1开始......）。见doc

month表示月份的整数值，从0开始 12月1月到11日。

所以你需要-1：

dateStr = new Date(ymd[0],ymd[1] -1,ymd[2],17,0,0);

您还应该在此处更改其他内容，例如将变量声明为本地：

function colorDue(due) {    
    var rd = 1;     
    var od = 15;    
    var yd = 30; 
    var color = "";
    //...
}

在Knockout样式绑定中使用javascript函数

1 个答案: