我想绑定(bind) 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>
和 View 模型:
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 = "";
}
}
}
编辑2: 评论工作的变化，但我有另一个问题。 Li 的类(class)为“active”，但 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}">
这里有什么问题吗？
最佳答案
发布详细信息作为答案。
第一步是使 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()}">
关于javascript - 绑定(bind)到 knockout.js 中的类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14292742/