【问题标题】：Knockout toggle active class on click淘汰赛在点击时切换活动类
【发布时间】：2014-06-16 15:31:27
【问题描述】：

我有一个淘汰赛应用程序，其中我有一个功能，可以根据所选选项显示/隐藏页面上的元素。已选择用于激活特定切换的按钮将具有“活动”类，以便它从其他按钮中“脱颖而出”并且清晰可见，这是所选选项。我的问题是我创建了一个剔除函数来切换活动类，但它触发了所有按钮而不是选定按钮的活动状态，我不知道为什么？

var viewModel = function(){
    var self = this;
    self.isActive = ko.observable(false);
    self.toggleActive = function(data, event){
        self.isActive(!self.isActive()); //toggle the isActive value between true/false
    }
}

<button data-bind="click: toggleActive, css : {'activeStyle' : isActive}">Toggle Active</button>
<button data-bind="click: toggleActive, css : {'activeStyle' : isActive}">Toggle Active</button>
<button data-bind="click: toggleActive, css : {'activeStyle' : isActive}">Toggle Active</button>

小提琴：http://jsfiddle.net/amMup/5/

【问题讨论】：

既然您已经标记了 jQuery，您可能需要考虑使用 jQuery 的 toggleClass 函数：api.jquery.com/toggleClass
那是个错误；迅速修复。最好不要将敲除函数与 jquery 函数混合使用

标签： javascript knockout.js knockout-2.0

【解决方案1】：

所有三个按钮只有一个视图模型。这意味着您只有一个所有按钮都绑定到的“isActive”标志。

改为使用一组项目和一个 foreach 循环来呈现每个项目。这是您的视图模型的调整版本：

var viewModel = function(){
    var self = this;
    self.items = [
        { isActive: ko.observable(false) },
        { isActive: ko.observable(false) },
        { isActive: ko.observable(false) }
        ];
    self.toggleActive = function(data, event){
        data.isActive(!data.isActive());//toggle the isActive value between true/false
    }
}

var myModel = new viewModel();

ko.applyBindings(myModel);

并且 HTML 被简化了：

<div data-bind="foreach: items">
    <button data-bind="click: $parent.toggleActive, css : {'activeStyle' : isActive}">Toggle Active</button>
</div>

注意使用$parent 来访问父级的binding context。当您在 foreach 循环中时，绑定上下文是从 foreach 循环中提取的单个项目。通过访问$parent，您可以“到达”包含items 属性的对象——在您的情况下，它是toggleActive 所在的视图模型。

这是一个更新的小提琴：http://jsfiddle.net/psteele/amMup/6/

【讨论】：

这太好了，谢谢。我现在如何着手让它在任何时候都只有一个活动按钮？
有许多不同的方法。对于此示例，您可以在 toggleActive 函数中执行此操作。循环遍历所有项目并将其 isActive 设置为 false，然后在“数据”项目上设置 isActive true (data.isActive(true))

【解决方案2】：

这是因为您将它们全部绑定到同一个可观察对象。

http://jsfiddle.net/Kohan/fdzqJ/

Js

var viewModel = function(){
    var self = this;
    self.isActive1 = ko.observable(false);
    self.isActive2 = ko.observable(false);
    self.isActive3 = ko.observable(false);

    self.toggleActive = function(data){
        data(!data());
    }
}

var myModel = new viewModel();

ko.applyBindings(myModel);

HTML

<button data-bind="click: function(){toggleActive(isActive1)}, css : {'activeStyle' : isActive1}">Toggle Active</button>
<button data-bind="click: function(){toggleActive(isActive2)}, css : {'activeStyle' : isActive2}">Toggle Active</button>
<button data-bind="click: function(){toggleActive(isActive3)}, css : {'activeStyle' : isActive3}">Toggle Active</button>

【讨论】：

【解决方案3】：

另一种方式：

<button data-bind="click: function(){setActive('1')}, css:  buttonActive() == '1' ? 'active' : '' ">Toggle Active</button>

var viewModel = function(){
    var self = this;
    self.buttonActive = ko.observable(false);
    self.buttonActive = function(index){
        self.buttonActive(index);
    }
}

var myModel = new viewModel();

ko.applyBindings(myModel);

【讨论】：