我有一个表,其中包含来自数据库的信息:

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 }"

10-05 21:03
查看更多