Question

我的数据库中有一个包含信息的表：

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

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

Answer 1

您可以为视图模型添加Knockout Computed Observable文本颜色（例如“TextColor”）。

此计算应取决于现有的Color observable，并可以使用上述函数。类似的东西：

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

最后在tr：

上添加一个颜色绑定到当前样式绑定

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

Answer 2

经过一番研究后，我找到了答案：

在viewmodel中我添加了这一行：

self.TextColor = ko.observable（i.TextColor）;
我使用数据库信息加载viewmodel：

元素[＆＃39; TextColor＆＃39;] = getContrastYIQ（element.Color）;
在cshtml文件中我添加了：

databind =＆＃34; style：{backgroundColor：Color，color：TextColor}＆＃34;
我改变了getContrastYIQ（）函数，如下所示：

function cutHex（h）{     return（h.charAt（0）==＆＃34;＃＆＃34;）？ h.substring（1,7）：h }

function HexToR（h）{     return parseInt（（cutHex（h））。substring（0,2），16） }

function HexToG（h）{     return parseInt（（cutHex（h））。substring（2,4），16） }

函数HexToB（h）{     return parseInt（（cutHex（h））。substring（4,6），16） }

function getContrastYIQ（hexcolor）{     var r = HexToR（hexcolor）;     var g = HexToG（hexcolor）;     var b = HexToB（hexcolor）;     var yiq =（（r * 299）+（g * 587）+（b * 114））/ 1000;     return（yiq＆gt; = 128）？＆＃39;黑色＆＃39; ：＆＃39;白色＆＃39 ;; }

它对我来说非常适合。希望它能帮助别人！

Knockout数据绑定通过背景颜色对比改变文本颜色

2 个答案: