淘汰赛有条件地设置CSS [英] knockout set css conditionally
问题描述
很抱歉可能提出了不正确的问题,但我感到非常困惑.我需要根据项目属性的值在foreach循环中设置项目的css类.
Sorry for maybe uncorrect question, but I feel really confused. I need to set the css class of an item in a foreach loop based on the value of an item's property.
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;
});
我试图以这种方式获得复杂性,但是却没有定义....(在控制器中,有一种方法可以接受任务并返回复杂性)
I tried to get complexity in such way but have undefined.... (in controller there is method that accepts task and returns complexity)
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>
需要进行哪些更改才能使其正常工作?
What to change to make it work?
推荐答案
您的computed
可能是在根视图模型上定义的,并且在调用它时,您已经在foreach: tasks
范围内.您需要使用$root
关键字指向CssBind
.
Your computed
is probably defined on the root view-model and when you're calling it you're already in a foreach: tasks
scope. You need to use the $root
keyword to point to CssBind
.
此外,不需要computed
,常规函数会更容易(尤其是通过参数传递):
Also, no need for a computed
, regular function will do easier (especially with argument passing):
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规则).
Please notice that I change the binding handler from css
to style
(the former is used to apply CSS classes while the latter applies explicit CSS rules).
这篇关于淘汰赛有条件地设置CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!