Want to understand how Knockout js css binding working

[Tridip Bhattacharjee]

see the code first

<table class="table table-bordered">
    <tbody data-bind="foreach: frameworks">
        <tr data-bind="css: {'selected':$root.selectedItem() == $data}">
            <td>
                <button class=btn data-bind="click: $parent.doStuff">A</button>
            </td>
            <td data-bind="text: $data"></td>
        </tr>
    </tbody>
</table>

var App = new function () {
        var self = this;
        self.frameworks = ko.observableArray();
        self.selectedItem = ko.observable(null);
        self.doStuff = function (item) {
            alert(item);
            self.selectedItem(item);
            //how to change table row color?
        };
    };

App.frameworks.push('bootstrap');
App.frameworks.push('knockout.js');
ko.applyBindings(App);

.selected
{
    background-color:red;
}

js fiddle link http://jsfiddle.net/yTtFu/1/

i do not understand this line
<tr data-bind="css: {'selected':$root.selectedItem() == $data}">

what is the meaning of this line. i guess it means if selected item and data is same then it will return true other wise false.
just setting true and false how attaching css class name ?

please help me to understand how css class name is getting attached based on true and false value ?

[Gunnar Liljas]

http://knockoutjs.com/documentation/css-binding.html

--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Michael Best]

http://knockoutjs.com/documentation/css-binding.html