在knockout.js中綁定到類

我想綁定LI/DIV的類。我正在使用knockout.js。我不知道如何使它工作。這是我的代碼：在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定義。

編輯：這是我多麼想chnage 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：從評論工作的變化，但我還有一個問題。李有類「積極」，但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}">

這裏有什麼錯？

來源

2013-01-12 Paweł Reszka

是您的.CLS觀察特性？如果沒有，請考慮製作可觀察的代碼並相應地更改代碼'self.conversations（）[i] .cls（「active」）;''或'self.conversations（）[i] .cls（「」）;' – ryadavilli

It有種工作。謝謝！但現在我有另一個問題。李有類「活躍」，但div有些奇怪。我會貼在後。 –

發佈的細節作爲一個答案。

第一步是使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-12 11:41:47 ryadavilli

css綁定比attr綁定更容易使用。它就是爲了這個目的。 – lego

答案編輯2：不是

'tab-pane ' + cls

使用

'tab-pane ' + cls()

來源

2013-01-12 11:39:21

它的工作原理！謝啦！ –

淘汰賽有類特殊的綁定，一個css綁定（ http://knockoutjs.com/documentation/css-binding.html）。

例子：

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

來源

2013-01-12 16:16:22 lego

在knockout.js中綁定到類

回答

相關問題