使用observableArray在點擊綁定上切換值

我是新來敲除和使用教程，但沒有運氣。我想設置一組圖像的行爲類似於一組複選框。他們最初應該在數組'self.brands'中設置爲'true'並且具有'.active'類。在點擊事件中，我希望他們將它們切換爲真或假，並將類設置爲.active到.deactive使用observableArray在點擊綁定上切換值

數組「self.brands」表示4個屬性。 ID，圖像路徑，ALT標記，檢查（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（品牌）的值時，它返回[object，object]。所以我不理解我將如何設置chosenBrandID爲true裏面的價值，我想

self.chosenBrandId(brand)[3];

但返回未定義的，所以我想知道如何設置的值，甚至什麼參數可以在「品牌」內檢索返回[object，object]的變量;

想這在以下幾個方面表現：。主動和.deactive類之間的單獨圖像切換的

1）的onclick？

2）onclick個人圖像更改self.brands數組的布爾真/假值？

3）創建一個函數，當你點擊鏈接「全選」或「全部取消」時，從.active和true或.deactive和false更改所有圖像的css和數組值。

來源

2013-02-12 scotty doesnt know

它看起來像你的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); 
};

來源

2013-02-12 06:16:25 7zark7

1和一個小的解釋：'observableArray'僅觀察*其中*元素的數組包含，而不是* *狀態的那些元件的。 – 2013-02-12 10:42:49

謝謝，你剛剛打開了我的世界！ – 2013-02-13 03:01:12

我很好奇這段代碼：「來自ko.applyBindings（new Model（），$（」html「）[0]）的$（」html「）[0]」，它是如何包含它的？ – 2013-02-13 03:02:03

使用observableArray在點擊綁定上切換值

回答

相關問題