3

我想绑定 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>

和视图模型：

chatR.conversation = function (username) {
var self = this;
self.messages = ko.observableArray();
self.username = username;
self.test = function (x) { alert(x.username) };
self.cls = "";
}

当单击特定选项卡并将所有其他 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 = "";
        }
    }
}

EDIT2：评论工作的变化，但我还有另一个问题。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}">

这里有什么问题？

4

3 回答 3

2

发布详细信息作为答案。

第一步是使 cls 属性成为可观察的，并将代码更改为并相应地更改您的代码self.conversations()[i].cls("active");或self.conversations()[i].cls("");

对于第二个，如编辑。

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

所以改变这个

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

至

<div data-bind="attr:{ 'id': username, 'class': 'tab-pane ' + cls()}">
于 2013-01-12T11:41:47.050 回答
1

编辑2的答案：而不是

'tab-pane ' + cls

利用

'tab-pane ' + cls()
于 2013-01-12T11:39:21.047 回答
0

Knockout 对类有特殊的绑定，一个 css 绑定 (http://knockoutjs.com/documentation/css-binding.html)。

例子：

<div data-bind='css: {classname: bla() == "something"}'>...</div>

于 2013-01-12T16:16:22.060 回答