Javascript – KnockoutJS value toggling in data-bind


I have a bit of javascript:

function ViewModel() {
    var self = this;
    self.highlight = ko.observable(true);   

ko.applyBindings(new ViewModel());

And the html that complements it:

<div data-bind="css: { highlighted: highlight }, click: highlight( !highlight() )">
    random string

What I'm trying to achieve:

  1. The css class 'highlighted' to only be activated when var highlight is true
  2. Clicking on the div will toggle the bool value of var highlight
  3. Wanted result: clicking on the div to activate/deactivate its css class

What I'm getting:

  1. The initial value of highlight is true, yet the css class starts deactivated (if I change the initial value to false, the css class is activated: which seems as if I've somehow triggered the click bind when I haven't yet clicked anything)
  2. The div's css class does not toggle on click

I'd rather not make a new corresponding click function inside ViewModel. I'm looking if possible for a bit of code I can place solely inline within the data-bind.

Here's the code on JSFiddle:

Can anyone explain what's happening and what I'm doing incorrectly?

Best Solution

I know it's an old question, but maybe could help someone. If you need to use toggle in a lot of places, maybe some custom binding sugar could help you:


ko.bindingHandlers.toggleClick = {
    init: function (element, valueAccessor) {
        var value = valueAccessor();

        ko.utils.registerEventHandler(element, "click", function () {


<div data-bind="css: { highlighted: highlight }, toggleClick: highlight">
    random string


This approach keeps some of my views very cleaner. Hope it helps.