Question

I have a template which looks something like this:

<script type="text/javascript">
var viewContext = {
    nodeClicked: function(event) {
        var target = $(event.target)
        var data = target.tmplItem().data

        viewModel.currentNode(data);
    }
};
</script>
<script type="text/html">
<a class='${ Class }' data-bind='click: viewContext.nodeClicked, css: { selected: viewModel.currentNode() == this }'>${ Name }</a>
</script>

I want to apply a css class to a HTML element if my observable contains a value equal to the data object used to render that element. My problem is with the part where I compare the viewModel observable to the current data item. I tried:

<a class='${ Class }' data-bind='click: viewContext.nodeClicked, css: { selected: viewModel.currentNode() == data }'>${ Name }</a>

and it did not work. Any ideas?

Answer 1

You should use $data to access the object being bound instead of just data.