Knockout在点击时切换活动类

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访问父级的绑定上下文.当您在foreach循环中时,绑定上下文是从foreach循环中拉出的单个项.通过访问$parent"到达"包含items属性的对象- 在您的情况下,它是toggleActive存在的视图模型.

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