Concatenate a CSS name in Knockout

Question

I'd like to know how to apply a css class name concatenated using $data for items in my Knockout ViewModel.

Goal

When a user clicks the "Praise" button (an item in my ViewModel array), I would like to apply the css class "feedbackItemIconPraise" to the LI. if the user clicks "Criticism", I would like to apply the class "feedbackItemIconPraise".

I assumed that concatenating a css class in the data-bind attribute using $data was the way to go but might be wrong.

Code

Relevant part of my ViewModel:

var FeedbackViewModel = function () {
    var self = this;
    self.feedbackItemTypes = ['Praise', 'Criticism', 'Problem', 'Question'];
    self.selectedFeedbackType = ko.observable('Praise');
    self.updateSelected = function (param) {
        self.selectedFeedbackType(param);
    };
};

var feedbackViewModel = new FeedbackViewModel();

ko.applyBindings(feedbackViewModel, document.getElementById("feedbackModal"));

Relevant parts of my View display:

<div id="feedbackListContainer">
    <ul class="thumbnails" id="feedbackList" data-bind="foreach: feedbackItemTypes">
       <li class ="feedbackItem" data-bind="click: $parent.updateSelected, text:$data, attr:{id:'feedbackItem'+$data, title:$data}, css: {'feedbackItem-Highlighted':$data==$parent.selectedFeedbackType(), 'feedbackItemIcon'+$data: true}">
        </li>
        </ul>
</div>

The Problem

What I think I'm getting wrong is applying the CSS class "'feedbackItemIcon' + $data". I think I'm misunderstanding how css classes are applied and if this is possible in Knockout or at odds with how Knockout works. When I attempt to do it this way, all my text disappears, and so I assume that I'm screwing up the syntax entirely.

Would appreciate some insight.

Answer 1

Using the class custom binding here, you can do this in a different way:

<li class ="feedbackItem" data-bind="
    click: $parent.updateSelected,
    text: $data,
    attr: {id:'feedbackItem'+$data, title:$data},
    css: {'feedbackItem-Highlighted':$data==$parent.selectedFeedbackType()},
    class: 'feedbackItemIcon'+$data">
</li>

This functionality will also be part of the css binding in the upcoming 2.2 version of Knockout. So then you wouldn't have to include the class custom binding. But you wouldn't be able to include two css bindings. One workaround would be to just make class an alias of css: ko.bindingHandlers['class'] = ko.bindingHandlers.css. Another would be to use my key.subkey plugin, which would allow this binding:

<li class ="feedbackItem" data-bind="
    click: $parent.updateSelected,
    text: $data,
    attr: {id:'feedbackItem'+$data, title:$data},
    css.feedbackItem-Highlighted: $data==$parent.selectedFeedbackType(),
    css: 'feedbackItemIcon'+$data">
</li>

Answer 2

This answer is obviously late to the game, but I'd like to suggest another solution:

<li data-bind="attr: { 'class': ' feedbackItem ' 
                                + ($data==$parent.selectedFeedbackType() 
                                   ? ' feedbackItem-Highlighted ' : '')
                                + ' feedbackItemIcon'+$data
                     }">    </li>

Answer 3

You're very close to a correct solution.

'feedbackItemIcon'+$data: true

You're right. This won't work because Knockout won't update the left side of this expression.

Instead, I would simply list all enum values and write something like this:

css: {'feedbackItem-Highlighted':$data==$parent.selectedFeedbackType(), 'feedbackItemIconPraise': $data==$parent.selectedFeedbackType() && $data='Praise', 'feedbackItemIconCriticism': $data==$parent.selectedFeedbackType() && $data='Criticism', 'feedbackItemIconProblem': $data==$parent.selectedFeedbackType() && $data='Problem', 'feedbackItemIconQuestion': $data==$parent.selectedFeedbackType() && $data='Question' }

I know that it looks a little ugly and seems a little repetitive, but AFAIK, there's no way to bind a template item to a CSS class name whose value will change at runtime.

FYI: You're probably already aware of this, but for future visitors, here is the link to the Knockout documentation on CSS binding.