1

私はノックアウトしてチュートリアルを操作するのは初めてですが、運がありません。

チェックボックスのグループと同様に動作するように画像の配列を設定しようとしています。これらは最初、配列「self.brands」ですべて「true」に設定され、クラス「.active」を持つ必要があります。クリックイベントで、trueまたはfalseを切り替えて、クラスを.activeから.deactiveに設定してもらいたい

配列'self.brands'は4つのプロパティを表します。ID、imagepath、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); 
};

これを設定する際に問題が発生します。現在、画像をクリックすると、一度に1つの画像にのみ.activeクラスが適用されます。self.chosenBrandId（brand）の値を取得しようとすると、[object、object]が返されます。したがって、chosenBrandID内の値をtrueに設定する方法がわからないので、試してみました

self.chosenBrandId(brand)[3];

しかし、それは未定義を返すので、値を設定する方法や、[object、object]を返す「brand」変数内で取得できるパラメーターさえも疑問に思っています。

これを次のように動作させますか？

1）個々の画像をクリックすると、.activeクラスと.deactiveクラスが切り替わりますか？

2）個々の画像をクリックすると、self.brands配列のブール値true / falseが変更されますか？

3）[すべて選択]または[すべて選択解除]リンクをクリックしたときに、すべての画像のcssと配列の値を.activeとtrueまたは.deactiveとfalseから変更する関数を作成しますか？

4

1 に答える 1

3

CSSクラスの「アクティブ」ロジックが間違っているようです。コードでは一度に1つしか設定できません。（クリックバインディングも複製したようです）。

チェックボックスのようにこれらを切り替える場合は、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-12T06:16:25.150 に答える