knockout foreach css multiple classes $data

Question

In this example I have two additional css classes I want to add to a DIV.

    <div data-bind="foreach: [{name: 'Hello', size:'Triple'}]">
      <div class="tile"
       data-bind="css: {'tile-selected': true, $data.size : true}">
      </div>
    </div>

The first being 'tile-selected' based on a boolean. This works well.

The second is actually a name of a class 'Triple', (and in this example, always add it, ie 'True')

I get the error:

Uncaught Error: Unable to parse bindings. Message: SyntaxError: Unexpected token .; Bindings value: css: {'tile-selected': true, $data.size : true}

I'm assuming that I can't use the $data.size part to pull in the 'Triple' literal from the 'size' property. Is there a way that I can do this? ($data['size'] also didn't seem to work)

Ravi Y Ravi Y · Accepted Answer · 2013-01-21T13:07:16

You cannot use the ko observables or properties as class names. Instead you would have to create a separate property for this and use the same for dynamic css binding something like below.

<div data-bind="css: sizeCSS">   Profit Information</div> 

var viewModel = {
/// some view model properties here.
        };

viewModel.sizeCSS = ko.computed(function() {
    return this.size();
}, viewModel);

EDIT: Check the dynamic CSS binding example here: http://knockoutjs.com/documentation/css-binding.html

knockout foreach css multiple classes $data

1 Answers