Работа с наблюдаемым массивом для переключения значений при привязке кликов

Question

Я новичок в нокауте и работе с учебниками, но не повезло.

Я пытаюсь установить массив изображений, чтобы они были похожи на группу флажков. Первоначально все они должны быть установлены в «true» в массиве «self.brands» и иметь класс «active». В событии click я хотел бы, чтобы они переключили их true или false и установили класс из .active в .deactive

Массив «self.brands» представляет 4 свойства. ID, путь к изображению, тег alt, checked (true или false). Когда вы нажимаете изображение, оно должно переключать значение true/false, установите 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]. Поэтому я не понимая, как бы я установить значение внутри chosenBrandID к истине, я попытался

self.chosenBrandId(brand)[3]; 

но возвращает неопределенное значение, так мне интересно, как установить значение и даже то, что параметры могут быть получены в рамках «марки» переменная, которая возвращает [объект, объект];

Хотела это вести себя следующим образом:

1) OnClick индивидуального переключения изображения между .active и .deactive класса?

2) onclick индивидуального изображения изменяет логическое значение true/false массива 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); 
};