Geek asks and answers

CSS name knockout

I would like to know how to apply the css class name associated with using $ data for elements in my night view program ViewModel.

purpose

When the user clicks the Praise button (an element in the 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 "feedbackItemIconPraise" class.

I suggested that combining the css class in a data binding attribute using $ data is the way to go, but it may be wrong.

the code

The 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 screen:

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

Problem

, , CSS '' feedbackItemIcon '+ $data'. , , css, Knockout , Knockout. , , , .

.

+5
3

.

'feedbackItemIcon'+$data: true

. , Knockout .

- :

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' }

, , AFAIK, CSS, .

FYI: , , Knockout CSS.

+3

class , -:

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

css 2.2. , class. css. class css: ko.bindingHandlers['class'] = ko.bindingHandlers.css. key.subkey, :

<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>
+2

This answer is clearly lingering in the game, but I would suggest a different solution:

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

More articles:


All Articles