Knockout在单击时切换活动类

Knockout toggle active class on click

本文关键字：活动 单击 Knockout      更新时间：2023-09-26

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

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>

Fiddle：http://jsfiddle.net/amMup/5/

所有三个按钮只有一个视图模型。这意味着你只有一个所有按钮都绑定到的"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来访问父级的绑定上下文。当您在foreach循环内时，绑定上下文是从foreach循环中提取的单个项。通过访问$parent，您可以"接触"到包含items属性的对象——在您的情况下，它是存在toggleActive的视图模型。

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

这是因为它们都绑定到同一个可观察对象。

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>

另一种方式：

<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);
相关文章：