淘汰賽設置css有條件

Question

對不起，也許不正確的問題，但我感到非常困惑。我需要根據項目屬性的值在foreach循環中設置項目的css類。

self.CssBind = ko.computed(function (task) { 
    var CssBind = ''; 
    if (getComplexity(task) === 'Easy') { 
    CssBind = "green"; 
} else if (getComplexity(task) === 'Intermediate') { 
    CssBind = 'yellow';} 
else if (getComplexity(task) === 'Difficult') { 
    CssBind = 'red'; 
} 
return CssBind; 
}); 

我想在這樣的方式獲得複雜但未定義....（控制器中有方法接受任務並返回複雜性）

self.complexity = ko.observable(); 
function getComplexity (task) { 
    ajaxHelper(taskItem, 'GET').done(function (data) { self.complexity(data); }); 
}; 

在HTML

<div class="panel panel-default" data-bind="foreach:{data:tasks, as: 'task'}"> 
     <div class="panel-heading"> 
      <a data-toggle="collapse" data-parent="#accordion" data-bind="text: Name, attr: { href : '#collapse' + task.Id}, css: {color: CssBind}"> 
      </a> 
     </div> 
     <div data-bind="attr: { id : 'collapse' + task.Id}" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       <span data-bind="text: Name"></span> 
      </div> 
     </div> 
    </div> 

如何改變以使其工作？

Answer 1

您的computed可能在根視圖模型上定義，當您調用它時，您已經在foreach: tasks範圍內。您需要使用$root關鍵字來指向CssBind。

而且，不需要一個computed，定時功能會做更容易（尤其是參數傳遞）：

self.CssBind = function (task) { 
    var CssBind = ''; 
    if (ko.unwrap(task.getComplexity) === 'Easy') { 
    CssBind = "green"; 
} else if (self.getComplexity() === 'Intermediate') { 
    CssBind = 'yellow';} 
else if (self.getComplexity() === 'Difficult') { 
    CssBind = 'red'; 
} 

return CssBind; 
}); 

而在你的HTML：

<a data-toggle="collapse" 
    data-parent="#accordion" 
    data-bind="text: Name, attr: { href : '#collapse' + task.Id}, style: {color: $root.CssBind.bind(null, task)}"> 

請注意，我更改綁定處理器從css到style（前者用於應用CSS類，後者則應用顯式CSS規則）。