淘汰赛风格绑定不让我追加！重要答案

【问题标题】：Knockout style binding not letting me append !important淘汰赛风格绑定不让我追加！重要
【发布时间】：2016-01-18 05:52:53
【问题描述】：

我正在尝试将背景绑定到这样的表格单元格：

data-bind="style: { background: Css }

Css 变量可以等于#F7C7D4 之类的颜色。

这部分有效，并且单元格充满了颜色，但是当我尝试打印页面时，没有任何颜色显示。当我在没有绑定的情况下尝试这个时，像这样：

<td style="background #F7C7D4 !important;"></td>

颜色显示在页面上和打印时。但是当我将代码更改为：

data-bind="style: { background: Css + ' !important' }

knockout 不会对后台进行数据绑定。不会抛出错误，但屏幕上没有显示颜色，当我检查元素时，背景样式尚未添加到样式属性中。我还尝试更改 Css 变量以包含 !important，结果与绑定不起作用。

JSFiddle

任何帮助将不胜感激。

【问题讨论】：

标签： knockout.js data-binding

【解决方案1】：

可以使用attr绑定来设置style属性的值）

data-bind="attr:{ style: 'background: ' + Css() + ' !important' }

【讨论】：

【解决方案2】：

样式绑定不支持!important。一种选择是改用css 绑定并使用实际的css 类。

另一种选择是使用自定义绑定。从 Knockout 3.3 开始，样式绑定就是这样应用样式的。

ko.bindingHandlers['style'] = {
    'update': function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor() || {});
        ko.utils.objectForEach(value, function(styleName, styleValue) {
            styleValue = ko.utils.unwrapObservable(styleValue);

            if (styleValue === null || styleValue === undefined || styleValue === false) {
                // Empty string removes the value, whereas null/undefined have no effect
                styleValue = "";
            }

            element.style[styleName] = styleValue;
        });
    }
};

关键部分是element.style[styleName] = styleValue;。

这种设置样式的方法不支持!important。改用setProperty 可以让您将其设为“重要”，但请注意这仅适用于 IE9+。

element.style.setProperty('background', '#F7C7D4', 'important');

以下是该绑定的示例。

ko.bindingHandlers.myCustomStyleBinding = {
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor() || {});
        ko.utils.objectForEach(value, function(styleName, styleValue) {
            var isImportant = false;
            styleValue = ko.utils.unwrapObservable(styleValue);

            if (styleValue === null || styleValue === undefined || styleValue === false) {
                // Empty string removes the value, whereas null/undefined have no effect
                styleValue = "";
            }

            isImportant = styleValue.indexOf('!important') > -1;
            styleValue = styleValue.split(' !important')[0];
            element.style.setProperty(styleName, styleValue, isImportant ? 'important' : '');
        });
    }
};

【讨论】：