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?

score 36 · Accepted Answer · answered Jun 13 '12 at 12:04

36

Something like

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

answered Jun 13 '12 at 12:04

jon

I found that about 10 minutes after posting this. Thanks @jon. – devlife Jun 13 '12 at 12:15
4

@devlife thankfully jon posted this 8 minutes after u asked, so u saved 2 minutes. :P – Andrew Jun 27 '17 at 15:59

1 Answers1