javascript - 单击时 knockout 切换事件类

Question

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

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/

Answer 1

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

相反，使用一个项目数组和一个 foreach 循环来呈现每个项目。这是您的 View 模型的调整版本:

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 的使用访问 parent 的 binding context .当您在 foreach 循环中时，绑定(bind)上下文是从 foreach 循环中提取的单个项目。通过访问 $parent您“到达”包含 items 的对象属性——在您的例子中，它是 toggleActive 所在的 View 模型存在。

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