1

在我的 ViewModel 中，我有以下方法返回 css 类，具体取决于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;
    };
}

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

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

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

这是一个小提琴：http: //jsfiddle.net/d8L6v9h7/

4

2 回答 2

2

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

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 的答案，甚至考虑比反转代码工作方式更进一步。

PS。如果您想要一个更“直接”的解决方案，例如当您创建一个快速模型并且不关心解决方案的整洁性时，您还可以诉诸：

<span data-bind="attr: { class: 'list-item ' + $root.GetClass('warning') }">
于 2015-04-28T08:30:42.253 回答
1

你用css绑定..

KnockoutJS CSS 绑定

例如 ： 

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

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

对于您的示例，您可以将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>
于 2015-04-28T08:26:20.393 回答