ノックアウトjsでforeachバインディングを使用して作成された要素のグループから特定の要素のクラスを永続的に設定する

Question

ノックアウトjsの使用を開始しました。私はノックアウトjsのforeachバインディングを使用して画像のグループを作成しています。最初はすべての画像に同じCSSクラスの「imageUnvisited」があり、クリックした特定の画像のクラスを変更してクラスを設定しようとしています。クリックイベントでクラスを変更するのに成功しましたが、別のイメージをクリックすると直前にクリックされたイメージの新しい追加クラスが削除されます。私はあなたが間違って何かを見つけたらそれを赦してくれました。

var vm = { 
 
    item: jsonData.items, 
 
    clickedImageIndex: ko.observable('') 
 
} 
 

 
ko.applyBindings(vm); 
 

 
function getVisitedClass(data, index) { 
 
    if (index() == vm.clickedImageIndex()) { 
 
    return "imageVisited" 
 
    } 
 
} 
 

 
function imageClicked(data, e) { 
 
    var itemTarget = e.target || e.srcElement; 
 
    index = ko.contextFor(itemTarget).$index(); 
 
    vm.clickedImageIndex(index); 
 
}

.imageUnvisited { 
 
    border: solid 1px green; 
 
} 
 

 
.imageVisited { 
 
    border: solid 1px black; 
 
}

<div data-bind="foreach: item" id="image_gallery"> 
 
    <div id="image_wrapper"> 
 
    <image data-bind="attr: { id: 'image' + $index(), src: $data.Src, class: getVisitedClass($data, $index)},click: imageClicked" class="imageUnvisited" role="button"></image> 
 
    </div> 
 
</div>

Answer 1

をあなたの現在のコードが動作しないのはなぜ：以下 は、私が使用していたコードである

あなたがあるclickedImageIndexにインデックスを保存していますクリックごとに更新されます。したがって、式index() == vm.clickedImageIndex()は、一度にイメージのにのみ当てはまります。

「クイックフィックス」：代わりにclickedImageIndexにインデックスを格納する

、あなたは、オブジェクトの内部の複数保存することができます。あなたのvmで

：

clickedImageIndex: ko.observable({}) 

あなたのハンドラで

：あなたのgetVisitedClassで

var clicked = vm.clickedImageIndex(); 
clicked[index] = true; 

vm.clickedImageIndex(clicked); 

：

if (vm.clickedImageIndex()[index()]) { 
    return "imageVisited" 
} 

良く修正：

それは少し厳しいノックアウトのMVVMアーキテクチャに従うことを、おそらく良いアイデアだ...これは意味：

• をImageViewModelインスタンス
• にあなたのイメージの地図ImageViewModel
• にclicked観測可能なプロパティを追加ImageViewModel.prototype.onClickを追加メソッドは、this.clicked(true)
• data-bind="click: onClick, css: { 'imageVisited': clicked }"データバインドを使用して状態を更新します。