Javascript 在Knockout中连接CSS名称

我想知道如何为我的Knockout ViewModel中的项应用一个使用$data连接的css类名

目标 当用户单击“表扬”按钮（我的ViewModel数组中的一个项目）时，我希望将css类“FeedbackItemIConPlaise”应用于LI。如果用户单击“批评”，我想应用“FeedbackItemIConPlaise”类

我假设使用$data在数据绑定属性中连接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类是如何应用的，以及这是否可能在淘汰中实现，或者与淘汰的工作原理不一致。当我尝试这样做的时候，我所有的文本都消失了，所以我认为我完全搞错了语法

---

如果您能提供一些见解，将不胜感激。

您很快就能找到正确的解决方案

'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类名

---

仅供参考：您可能已经意识到了这一点，但对于未来的访问者，这里是。

使用

类

自定义绑定，您可以用不同的方式完成此操作：

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

---

这个答案显然是迟来的，但我想提出另一个解决方案：

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

谢谢，吉姆！你是对的；我试图避免这种情况，因为它感觉像是一种代码气味，但知道我尝试的工作方式是不可能的，就你所知，这确实是非常有帮助的。因为我只有四个项目，这不是什么大问题，但知道这一点肯定很好。令人困惑的是，当css绑定对象中只有一个键：value时，这个concat方法就可以工作。当添加更多内容时，您的问题似乎已经解决了，如果他有20多个CSS类，那么任何一个插件都可能是一个好的解决方案；但在这个例子中，我认为如果没有额外的运动部件，他会更好令人鼓舞的是，这将包含在Knockout 2.2中。定制绑定和插件是Knockout开发的组成部分。在这种情况下，对他来说，编写一个完全定制的绑定实际上可能更好。我还认为Ryan提出的解决方案是一个很好的解决方案：这个答案需要更多的投票。在KO中处理CSS是困难的。这使它更容易。

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