javascript - 在 Knockout 样式绑定(bind)中使用 javascript 函数

Question

我有一个 HTML 页面，我在其中对某些元素应用了一些 Knockout 绑定(bind):

<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 Integer value representing the month, beginning with 0 for January to 11 for December.

所以你需要一个-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 = "";
    //...
}