Javascript 绑定到knockout.js中的类

我想绑定LI/DIV类。我正在使用knockout.js。我不知道如何使它工作。这是我的代码：

<div id="users-list2" class="span8">
        <div class="tabbable">
            <!-- Only required for left/right tabs -->
            <ul class="nav nav-tabs" data-bind="foreach: conversations">
                <li data-bind="click: function () { $root.tabClick(username); }, attr:{ 'class': cls}" style="float:left"> 
                <a class="user-box-name" 
                     data-bind="text: username, attr:{ 'href':'#'+ username }, event: { contextmenu: $root.closeTab }"></a>
                </li>
            </ul>
            <div class="tab-content" data-bind="foreach: conversations">
                <div data-bind="attr:{ 'id': username, 'class': 'tab-pane ' + cls}">
                    <div id="chat-list" class="span12" data-bind="foreach: messages">
                        <ul>
                            <li>
                                <div class="chat-listitem-username" data-bind="text: username">
                                </div>
                                <div class="chat-listitem-message" data-bind="html: content">
                                </div>
                                <div class="chat-listitem-timestamp" data-bind="text: timestamp.toLocaleTimeString()">
                                </div>
                            </li>
                        </ul>
                    </div>
            </div>

我想在单击特定选项卡时将cls更改为“活动”，并将所有其他cls更改为“”。它不起作用了。我做错了什么？像“tabbable”和“nav”这样的类是由bootstrap.js定义的

编辑： 这就是我想要改变cls的方式：

self.tabClick = function (username) {
    self.currentConversation = username;
    for (i = 0; i < self.conversations().length; i++) {
        if (self.conversations()[i].username == username) {
            self.conversations()[i].cls = "active";
        }
        else {
            self.conversations()[i].cls = "";
        }
    }
}

self.tabClick=函数（用户名）{
self.currentConversation=用户名；
对于（i=0；i

编辑2： 评论工作的变化，但我有另一个问题。Li拥有“活动”类，但DIC获得：

<div id="aaa_1" class="tab-pane function d(){if(0<arguments.length)
{if(!d.equalityComparer||!d.equalityComparer(c,arguments[0]))d.H(),c=arguments[0],d.G();return this}b.r.Va(d);return c}" 
data-bind="attr:{ 'id': username, 'class':'tab-pane '+cls}">

---

这里出了什么问题？

回答编辑2：而不是

'tab-pane ' + cls 

使用

---

将详细信息发布为答案

第一步是使cls属性成为可观察的，将代码更改为，并相应地更改代码

self.conversations（）[i].cls（“active”）

或

self.conversations（）[i].cls（“”）

对于第二个，请参见“编辑”

您需要输出cls的值，而不是整个cls

所以改变这个

<div data-bind="attr:{ 'id': username, 'class': 'tab-pane ' + cls}">



到

Knockout为类提供了特殊绑定，即css绑定(http://knockoutjs.com/documentation/css-binding.html). 

例如：

…
您的.cls是可观察的属性吗？如果不是，请考虑使其可观察并相应地更改代码<代码>自我对话（）[CL]（“活动”）；
或
self.conversations（）[i].cls（“”）有点奏效了。谢谢但现在我有另一个问题。李的班级“活跃”，但迪夫得到了一些奇怪的东西。我将把它粘贴到post中。css绑定比attr绑定更容易使用。正是为了这个目的。
'tab-pane ' + cls()

<div data-bind="attr:{ 'id': username, 'class': 'tab-pane ' + cls}">

<div data-bind="attr:{ 'id': username, 'class': 'tab-pane ' + cls()}">