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 に答える