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>

およびviewModel：

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("");

編集のように2番目。

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 に答える