KnockoutJS css and class in the same binding

Question

Despite the section in https://knockoutjs.com/documentation/css-binding.html i wasnt able to use css and class together, instead I could use two different css bindings: http://jsfiddle.net/g9sot5qb/

Am I doing something wrong or is the documentation inaccurate?

<span class="cls1 cls2" data-bind="text: title,css: {active: active}, class: myClass" ></span>
<span class="cls1 cls2" data-bind="text: title,css: {active: active}, css: myClass" ></span>

pfx · Accepted Answer · 2019-10-16 19:44:13Z

1

The class binding is a Knockout version 3.5 feature.

From the v 3.5 release notes:

The new class binding supports dynamic class strings.
This allows you to use the css and class bindings together to support both methods of setting CSS classes.

Your jsfiddle is using an older version.

Also note that the observable active must have a true value in order to get the css class 'active' applied.

See the (runnable) example below, where both a class and css binding are active.

var viewModel= {
  myClass: ko.observable('test'),
  title: ko.observable('Title'),
  active: ko.observable(true)
};

ko.applyBindings(viewModel);

.test{
  color: red
}

.active {
  font-size: 32px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>

<span class="cls1 cls2" data-bind="text: title, css: {active: active}, class: myClass" ></span>

edited Oct 16, 2019 at 19:44

answered Oct 16, 2019 at 18:57

pfx

23.9k52 gold badges107 silver badges126 bronze badges

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

Collectives™ on Stack Overflow

KnockoutJS css and class in the same binding

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related