我有一个表,其中包含来自数据库的信息:
ViewModel:
function alertViewModel(i) {
var self = this;
self.Id = ko.observable(i.Id);
self.AlertType = ko.observable(i.AlertType);
self.Category = ko.observable(i.Category);
self.Color = ko.observable(i.Color);
self.AlertText = ko.observable(i.AlertText);
self.update = function (data) {
if (typeof (data.AlertType) != 'undefined') self.AlertType(data.AlertType);
if (typeof (data.Category) != 'undefined') self.Category(data.Category);
if (typeof (data.Color) != 'undefined') self.Color(data.Color);
}
};
在cshtml中,我显示如下数据:
<table class="table" id="alertstable">
<tbody data-bind="foreach: alerts">
<tr data-bind="style: { backgroundColor: Color }">
<td>
<b data-bind="text: AlertText">Message</b>
</td>
</tr>
</tbody>
</table>
每个表格行可以具有不同的背景颜色,并且取决于该颜色对比,文本颜色应以黑色或白色更改,如以下代码所示:
function getContrastYIQ(hexcolor){
var r = parseInt(hexcolor.substr(0,2),16);
var g = parseInt(hexcolor.substr(2,2),16);
var b = parseInt(hexcolor.substr(4,2),16);
var yiq = ((r*299)+(g*587)+(b*114))/1000;
return (yiq >= 128) ? 'black' : 'white';
}
可以使用此功能更改文本颜色吗?请帮我。非常感谢
最佳答案
您可以为视图模型添加文本颜色的Knockout Computed Observable(例如“ TextColor”)。
计算得出的结果应取决于可观察到的现有颜色,并可以利用上述功能。就像是:
self.TextColor = ko.computed(function() {
return getContrastYIQ(self.Color());
});
最后在tr的当前样式绑定上添加颜色绑定:
databind="style: { backgroundColor: Color, color: TextColor }"