javascript - Concatenate a CSS name in Knockout - Stack Overflow

admin管理员组

文章数量:1332389

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.

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.

• javascript
• css
• asp-mvc
• knockout.js

Share Follow asked Sep 13, 2012 at 16:57 SeanKilleenSeanKilleen 8,9771818 gold badges8484 silver badges139139 bronze badges 1

• It seems that your problem has already been solved here – gbs Commented Sep 13, 2012 at 19:59

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.

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 uping 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>

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>

本文标签： javascriptConcatenate a CSS name in KnockoutStack Overflow