add dynamic class with css binding

Question

I want to add a class behind payment-method by function with the knockout css binding (in Magento 2.1). So this is the current code:

<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}">
    <div class="payment-method-title field choice">
        <input type="radio"
               name="payment[method]"
               class="radio"
               data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"/>

The class is returned by getCode() which works above with the id and value. So I thought I could do just:

<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked()), getCode()}">

But then it fails with:

knockout.js:2624 Uncaught SyntaxError: Unable to parse bindings. Bindings value: css: {'_active': (getCode() == isChecked()), getCode() } Message: Unexpected token }

<div class="payment-method" data-bind="css: getCode()">

This works.

<div class="payment-method" data-bind="css: {getCode()}">

This doesn't.

<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}, attr: {'class': getCode()}">

This works too but will overwrite the payment-method class and the _active class isn't set either initally anymore.

How do I set that dynamic class?

tyler_mitchell · Accepted Answer · 2017-07-31 10:22:49Z

3

This piece of code is redundant, as the css data-bind is getting overwrite with your attr binding.

<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}, attr: {'class': getCode()}">

This is how you can do your dynamic class (assumption these properties are observable):

<div class="payment-method" data-bind="css: CSS">

self.CSS = ko.computed(function() {
    var code = self.getCode();
    var isChecked = self.isChecked();
    return code + ' ' + (code == isChecked ? '_active' : '');
}, viewModel);

answered Jul 31, 2017 at 10:22

tyler_mitchell

1,7471 gold badge20 silver badges27 bronze badges

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

4 Comments

steros Over a year ago

Thanks, but assuming I can not add another function. According to the documentation I can set multiple css classes. Does that not work with function arguments?

tyler_mitchell Over a year ago

No you can <div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked()), getCode() }"> -> knockoutjs.com/documentation/css-binding.html, but this may not work as its a mix of dynamic class and setting static, so would be better practice to do it in one place. I would just say this is a more optimal way of doing it. As its only one call instead of several

steros Over a year ago

Yeah I tried that but it gives an error, I updated my question with the exact error message.

tyler_mitchell Over a year ago

To me that error means you can't mix static and dynamic. Do one or other. If you update question with what getcode and ischecked. I could give you exact solution or jsFiddle

steros · Accepted Answer · 2017-07-31 11:43:38Z

0

The comment from @tyler_mitchell helped me find the solution myself through this thread: https://stackoverflow.com/a/21528681/928666

I can do:

<div class="payment-method" data-bind="attr: { 'class': 'payment-method ' + getCode() }, css: {'_active': (getCode() == isChecked())}">

Not brilliant but well...

answered Jul 31, 2017 at 11:43

steros

1,9342 gold badges30 silver badges63 bronze badges

1 Comment

steros Over a year ago

But if you can add a function easily I'd do what tyler_mitchell proposed.

sidonaldson · Accepted Answer · 2020-06-11 13:13:26Z

0

Another example should anyone need it

<div data-bind="attr: { 'class': 'mainClass' + (dynamicClassSetOnce ? ' ' + dynamicClassSetOnce : '' }, css: { 'mainClass--focussed': isFocussed }">
...
</div>

edited Jun 11, 2020 at 13:13

answered Jun 11, 2020 at 12:32

sidonaldson

25.4k10 gold badges60 silver badges65 bronze badges

Collectives™ on Stack Overflow

add dynamic class with css binding

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related