css - Knockout 数据绑定(bind)通过背景颜色对比更改文本颜色

Question

我有一个包含来 self 的数据库的信息的表格:

View 模型:

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

可以使用此功能更改文本颜色吗？请帮助我。非常感谢

Answer 1

您可以添加 Knockout Computed Observable用于 View 模型的文本颜色(如“TextColor”)。

这个计算应该依赖于现有的 Color observable 并且可以使用提到的函数。像这样的东西:

self.TextColor = ko.computed(function() {
    return getContrastYIQ(self.Color());
});

最后给tr上的当前样式绑定(bind)添加一个颜色绑定(bind):

databind="style: { backgroundColor: Color, color: TextColor }"