目标

当用户点击“赞美”按钮（我的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' }

我知道它看起来有点难看并且看起来有点重复，但是AFAIK，没有办法将模板项绑定到CSS类名，其值将在运行时更改。

仅供参考：您可能已经意识到这一点，但对于未来的访问者，这里是link to the Knockout documentation on CSS binding。

Answer 2

使用class自定义绑定here，您可以通过其他方式执行此操作：

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

此功能也将成为即将推出的2.2版Knockout中css绑定的一部分。那么您就不必包含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>

Answer 3

这个答案显然是游戏的后期，但我想提出另一个解决方案：

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

在Knockout中连接一个CSS名称

目标

代码

问题

3 个答案: