Knockout data-bind css if function

Question

I want to add a class to an element if the title of the page includes "Home". Currently, I use this:

<li data-bind="css: { 'active': function(){return document.title.indexOf('Home') > -1;}}">

However this does not work, this function does not get executed... How do I make this work?

user3297291 · Accepted Answer · 2017-02-23 12:58:37Z

2

Knockout wraps the value in a computed function in a way that resembles this:

Input: "yourClassName": whateverYouPutIn
Output: "yourClassName": ko.computed(function() { return whateverYouPutIn; })

In your case, you put in a function, which will result in a "truethy" value setting the active class. You can fix this by:

Option 1 (quick): Don't wrap it in a function

<li data-bind="css: { 
    'active': document.title.indexOf('Home') > -1
  }"></li>

Option 2 (not recommended): Fix the typo (`funciton`) and call the function

<li data-bind="css: { 
    'active': (function() {
      return document.title.indexOf('Home') > -1;
     }())
  }"></li>

Option 3: Add these kinds of properties to your viewmodel

var vm = {
  // set when VM is initialized
  isActive: document.title.indexOf("Home"), 
  // if you want to check the title during data-binding
  isActiveDuringBind: function() {
    return document.title.indexOf("Home");
  }
}

With either

<li data-bind="css: {'active': isActive }"></li>

or

<li data-bind="css: {'active': isActiveDuringBind() }"></li>

Note that using the DOM api outside of custom bindings is considered "bad practice"... But in this case I guess you can get away with it...

Note that because there are no observable values being used, your class will not toggle when you change document.title.

edited Feb 23, 2017 at 12:58

answered Feb 23, 2017 at 12:52

user3297291

23.5k4 gold badges33 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mason Over a year ago

Thank you for the extended answer, made it work! Sorry for the stupid typo though.

Collectives™ on Stack Overflow

Knockout data-bind css if function

1 Answer 1

Option 1 (quick): Don't wrap it in a function

Option 2 (not recommended): Fix the typo (`funciton`) and call the function

Option 3: Add these kinds of properties to your viewmodel

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Option 1 (quick): Don't wrap it in a function

Option 2 (not recommended): Fix the typo (funciton) and call the function

Option 3: Add these kinds of properties to your viewmodel

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related

Option 2 (not recommended): Fix the typo (`funciton`) and call the function