的js

Question

我有一个淘汰应用程序，在其中我有一个功能，根据所选的选项显示/隐藏页面上的元素。选择用于激活特定切换的按钮将具有“活动”按钮。上课以使其脱颖而出从其他人那里可以清楚地看到这是所选择的选项。我的问题是我创建了一个淘汰赛功能来切换活动课程，但是它会触发按钮的全部上的活动状态而不是选中的按钮。我不确定为什么？

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/

Answer 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/

Answer 2

这是因为你将它们全部绑定到同一个observable。

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>

Answer 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);

Knockout在点击时切换活动类

3 个答案:

的js

HTML