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

Question

在我的 ViewModel 中，我有以下方法 returns 我 css class 取决于 pState:

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

我想在我的视图中添加 class：

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

我的问题：现有的 class list-item 将被覆盖。

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

Answer 1

您使用 css 绑定..

KnockoutJS CSS Binding

例如：

<div data-bind="css: { profitWarning: currentProfit() < 0 }">
   Profit Information
</div>

<script type="text/javascript">
    var viewModel = {
        currentProfit: ko.observable(150000) // Positive value, so initially we don't apply the "profitWarning" class
    };
    viewModel.currentProfit(-50); // Causes the "profitWarning" class to be applied
</script>

您可以只添加 class 本身，也可以添加条件逻辑来决定何时应用它。

对于您的示例，看起来您可以将 lCssClass 作为可观察对象并将其应用于您的 html：

var self = this,
classObservable = ko.observable("");

switch(pState)
        {
            case "warning": 
                self.classObservable('bg-yellow');
                break;
            case "red":
                self.classObservable('font-red');
                break;
            default:
                self.classObservable('font-default');
                break;
        }

然后在你的 HTML 中：

<span class="list-item" data-bind="css: classObservable()">This is a warning.</span>

Answer 2

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>

这是对您问题的 "straight up" 回答。另请检查，甚至考虑比反转代码工作方式更进一步。

PS。如果您想要更多 "straight up" 的解决方案，例如当您正在快速创建模型并且不关心解决方案的整洁性时，您还可以求助于：

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

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

How can I add an css class generated by a javascript method in knockout.js?

javascript

knockout.js

knockout-3.0