How to conditionally render a css class with knockoutjs

Question

I have some html like the following:

<div class="control-group">
    <input type="text" data-bind="value: $data.DealCode" name="DealCode" class="input-mini" />
</div>

However, ifnot: $data.DealCodeIsValid, I need to render the following:

<div class="control-group error">
    <input type="text" data-bind="value: $data.DealCode" name="DealCode" class="input-mini" />
</div>

Note the additional class "error" in the div. Is there a way to do that with knockoutjs?

jon · Accepted Answer · 2012-06-13 12:04:21Z

36

Something like

<div data-bind="css: {'control-group': true, error: (!$data.DealCodeIsValid)}">

answered Jun 13, 2012 at 12:04

jon

7285 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

I found that about 10 minutes after posting this. Thanks @jon.

@devlife thankfully jon posted this 8 minutes after u asked, so u saved 2 minutes. :P