KnockoutJS add static and dynamic class name using css property

Question

I want to add a dynamic classname which will come from javascript based on some check. But one class navigate-forward is there which is also displayed based on some check. How to combine both?

Following is my code -

<span class="menu-item" data-bind="text: data.description,
            css: {
                    'navigate-forward': !child.action,
                    child.className //I tried something like this which doesn't work
            }"></span>

child.className will have a value based on some check in javascript code. And whatever value it gives I want to add that class to this span.

Ex. if child.className is tooltip then that class should be added to the span.

output

<span class="menu-item navigate-forward tooltip">Menu item</span>

Possible duplicate of combine dynamic and static classes through css binding, knockout.js — Philip Bijker
– Philip Bijker, Commented Oct 30, 2018 at 6:14

Chris · Accepted Answer · 2018-10-30 13:02:41Z

0

The css: binding only accepts a list of classes and whether to apply them or not. You could use:

<div data-bind="attr: { 'class': MyPropertyName }" class="initialClass"></div>

But this would overwrite any pre-existing classes (initialClass) on the element.

Take a look at https://github.com/knockout/knockout/wiki/Bindings---class where there is a custom binding handler that allows you to specify a dynamic class:

<div class="initialClass" data-bind="class: MyPropertyName"></div>

This solution will combine the existing class attribute with the MyPropertyName property.

answered Oct 30, 2018 at 13:02

Chris

4263 silver badges15 bronze badges

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

Comments

Amit Bhoyar · Accepted Answer · 2018-10-30 15:48:51Z

0

function vm(){
  var self = this;
  self.className = ko.observable("class2");
}


(function(){
var viewModel = new vm();
ko.applyBindings(viewModel);
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<label class="class1" data-bind="css:className">Your Element</label>

answered Oct 30, 2018 at 15:48

Amit Bhoyar

1,0677 silver badges22 bronze badges

Comments

Jason Spake · Accepted Answer · 2018-10-31 16:13:52Z

You can also use the style and css bindings with an object that holds all your styles and classes instead of using individual class names. This allows for a more programmatic approach.

function viewModel(){
  var self = this;
  this.description = ko.observable('placeholder text');
  this.useBlue = ko.observable(false);
  this.borderClass = ko.observable("red-border");

  this.classes = ko.pureComputed(function(){
    var obj = {
      'blue-background': self.useBlue()
    };
    obj[self.borderClass()] = true;
    return obj;
  });
}

ko.applyBindings(new viewModel());

.blue-background {
  background-color: lightblue;
}

.red-border {
  border: 1px solid red;
}

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

<span class="menu-item" data-bind="text: description, css: classes"></span>
<br/>
            
<input type="button" data-bind="click: function(){ useBlue(!useBlue()) }" value="toggle" />

Collectives™ on Stack Overflow

KnockoutJS add static and dynamic class name using css property

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related