data - knockout set css condicionalmente

ko if binding

Question

Perdón por una pregunta incorrecta, pero me siento realmente confundida. Necesito establecer la clase css de un elemento en un ciclo foreach basado en el valor de la propiedad de un elemento.

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;
});

Traté de obtener la complejidad de esa manera pero no he definido ... (en el controlador hay un método que acepta tareas y devuelve complejidad)

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

En 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>

¿Qué cambiar para que funcione?

Answer 1

Probablemente su computed esté definida en el modelo de vista raíz y cuando lo llame ya se encuentra en un alcance foreach: tasks . Necesita usar la palabra clave $root para apuntar a CssBind .

Además, no es necesario contar con una función regular y computed lo haga más fácil (especialmente con el paso de argumentos):

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;
});

Y en tu HTML:

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

Tenga en cuenta que cambio el controlador de enlace de css a style (el primero se usa para aplicar clases CSS mientras que el segundo aplica reglas CSS explícitas).