淘汰赛设置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规则）。