在Knockout中连接一个CSS名称

Question

我想知道如何为我的Knockout ViewModel中的项目使用$ data连接的css类名称.

目标

当用户单击"赞美"按钮(我的ViewModel数组中的项目)时,我想将css类"feedbackItemIconPraise"应用于LI.如果用户点击"批评",我想申请"feedbackItemIconPraise"类.

我假设使用$ data连接data-bind属性中的css类是可行的方法,但可能是错误的.

码

我的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"));

我的视图显示的相关部分:

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

问题

我认为我错了是应用CSS类"'feedbackItemIcon'+ $ data".我想我误解了如何应用css类,如果在Knockout中这是可能的,或者与Knockout的工作方式不一致.当我尝试这样做时,我的所有文本都会消失,所以我认为我完全搞砸了语法.

会欣赏一些见解.

Answer 1

您已经非常接近正确的解决方案了。

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

我知道它看起来有点难看，而且似乎有点重复，但是据我所知，没有办法将模板项绑定到 CSS 类名，而 CSS 类名的值会在运行时更改。

仅供参考：您可能已经意识到这一点，但对于未来的访问者，这里是有关 CSS 绑定的 Knockout 文档的链接。