将css类绑定到观察到的模型属性

Question

我想将divs css类绑定到视图模型的属性,如下所示:

<div id="statusIndicator" data-bind="css: selectedPriority">

但这会产生结果:

 <div id="statusIndicator" class=" 0 1 2 3">

这是视图模型:

myViewModel = {
    selectedPriority: ko.observable('High'),
    Company: ko.observable("Bert"),
    Rows: ko.observableArray([
         new row(),
         new row(),
         new row()
    ]),
    Tabs: ['High', 'Medium', 'Low'],

    selectPriority: function (tab) {
        this.selectedPriority(tab);
    }
};

因此,当我加载使用此视图模型的页面时,我希望div为:

<div id="statusIndicator" class="High">

我究竟做错了什么？

Answer 1

对于这种情况,你可以这样做:

<div data-bind="attr: { 'class': selectedPriority}">

这种方法唯一的缺点是它会直接设置类,而不是打开或关闭一个类,所以如果你使用多个类,那么selectedPriority需要包含完整的类列表.

Answer 2

看起来你不能直接从你的模型中设置一个类:http://knockoutjs.com/documentation/css-binding.html

你做不到这样的事情:

 <div data-bind="css: { high: selectedPriority() == 1, medium: selectedPriority() == 2}">