5

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

目标

当用户单击“Praise”按钮（我的 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 的工作方式不一致。当我尝试这样做时，我的所有文本都消失了，所以我认为我完全搞砸了语法。

将不胜感激一些见解。

4

3 回答 3

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

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

于 2012-09-13T18:20:40.460 回答
2

在此处使用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 版 Knockout 绑定的一部分。因此，您不必包含class自定义绑定。但是你不能包含两个css绑定。一种解决方法是只创建:class的别名。另一个是使用我的key.subkey插件，它允许这种绑定：cssko.bindingHandlers['class'] = ko.bindingHandlers.css

<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>
于 2012-09-13T20:08:00.737 回答
2

这个答案显然迟到了，但我想提出另一种解决方案：

<li data-bind="attr: { 'class': ' feedbackItem ' 
                                + ($data==$parent.selectedFeedbackType() 
                                   ? ' feedbackItem-Highlighted ' : '')
                                + ' feedbackItemIcon'+$data
                     }">    </li>
于 2013-05-16T15:39:30.553 回答