使用 observableArray 在点击绑定上切换值

Question

我不熟悉淘汰赛并使用教程，但没有运气。

我正在尝试将一组图像设置为类似于一组复选框。它们最初应在数组“self.brands”中设置为“true”，并具有“.active”类。在点击事件中，我希望他们将它们切换为真或假，并将类从 .active 设置为 .deactive

数组“self.brands”代表 4 个属性。 ID、图像路径、alt 标记、选中（真或假）。当您单击图像时，它应该切换真/假值，将 css 从 .active {opacity:1} 设置为 deactive {opacity:0.2}。

这是 self.brands 可观察数组：

self.brands = ko.observableArray([["1",'acdsee.jpg','ACD See',"true"], "2",'amazon.jpg','Amazon',"true"], ["3",'aol.jpg','AOL',"true"], ["4",'cisco.jpg','Cisco',"true"];

这是图片的html：

<a href="#">Select All</a> | <a href="#">Deselect all</a>
<br />
<div id="brands">
<ul data-bind="foreach: brands" class="brands">
                  <li data-bind="click: $parent.setBrand,
               css: { active: $data == $root.chosenBrandId() }"><a href="javascript:void(0);" data-bind="click: $parent.setBrand"> <img data-bind="attr:{src: $data[1], alt: $data[2]}" /></a> 
               </li>
                </ul>
</div>

css：

.active {opacity:1}
.deactive {opacity:0.2}

淘汰码：

self.chosenBrandId = ko.observable();

self.setBrand = function(brand) { 

self.chosenBrandId(brand); 
}; 

我在设置时遇到问题。当前，当您单击图像时，它一次仅将 .active 类应用于一张图像。当我尝试获取 self.chosenBrandId(brand) 的值时，它返回 [object, object]。所以我不明白如何将 selectedBrandID 中的值设置为 true，我尝试了

self.chosenBrandId(brand)[3];

但是返回未定义，所以我想知道如何设置值，甚至可以在返回 [object,object] 的“品牌”变量中检索哪些参数；

希望它以下列方式运行：

1) 单个图像的 onclick 在 .active 和 .deactive 类之间切换？

2) 单张图片的 onclick 改变 self.brands 数组的布尔真/假值？

3) 创建一个函数，当您单击链接“全选”或“取消全选”时，将所有图像 css 和数组值从 .active 和 true 或 .deactive 和 false 更改？

Answer 1

看起来您的 CSS 类“活动”逻辑是错误的，您的代码一次只允许设置一个。 （看起来你也复制了点击绑定）。

如果您想切换这些复选框，true/false 属性应该是 ko.observable。 我将代码修改如下：

http://jsfiddle.net/JvqHs/

var self = this;
self.brands = ko.observableArray([{
    id: "1",
    img: 'acdsee.jpg',
    name: 'ACD See',
    active: ko.observable(true)
}, {
    id: "2",
    img: 'amazon.jpg',
    name: 'Amazon',
    active: ko.observable(true)
}, {
    id: "3",
    img: 'aol.jpg',
    name: 'AOL',
    active: ko.observable(true)
}, {
    id: "4",
    img: 'cisco.jpg',
    name: 'Cisco',
    active: ko.observable(true)
}]);

self.setBrand = function (brand) {
    var state = !brand.active();
    brand.active(state);
};