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