javascript - 如何在 knockout.js 中添加由 javascript 方法生成的 css 类？

Question

在我的 ViewModel 中，我有以下方法根据 pState 向我返回 css 类:

function MyViewModel()
{
    var self = this;

    self.GetClass = function(pState) 
    {
        var lCssClass;

        switch(pState)
        {
            case "warning": 
                lCssClass = 'bg-yellow';
                break;
            case "red":
                lCssClass = 'font-red';
                break;
            default:
                lCssClass = 'font-default';
                break;
        }

        return lCssClass;
    };
}

我想在我的 View 中添加类:

<span class="list-item" data-bind="attr : { class : $root.GetClass('warning')}">This is a warning.</span>

我的问题:现有类 list-item 将被覆盖。

这是一个 fiddle :http://jsfiddle.net/d8L6v9h7/

Answer 1

css binding将保留现有的类。使用它，例如像这样:

function MyViewModel()
{
    var self = this;
  
    self.GetClass = function(pState) 
    {
        var lCssClass;

        switch(pState)
        {
            case "warning": 
                lCssClass = 'bg-yellow';
                break;
            case "red":
                lCssClass = 'font-red';
                break;
            default:
                lCssClass = 'font-default';
                break;
        }

        return lCssClass;
    };
}

ko.applyBindings(new MyViewModel());

.list-item:before { content: ' ✓ '; } /* Just to prove it's preserved. */
.bg-yellow { background-color: yellow; }
.font-red { color: red; }
.font-default { }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<span class="list-item" data-bind="css: $root.GetClass('warning')">This is a warning.</span>

这是对您问题的“直接”回答。另请查看 @Progrindis answer甚至考虑在反转代码工作方式方面更进一步。

附言。如果您想要一个更“直截了当”的解决方案，例如当您正在创建一个快速模型并且不关心解决方案的整洁性时，您还可以求助于:

<span data-bind="attr: { class: 'list-item ' + $root.GetClass('warning') }">