Bir knockout.js dosyasında, onClick

Question

'daki bir öğeye belirli bir sınıfın nasıl uygulanacağını forma gönderme JSON aracılığıyla doldurulan bir gözlemlenebilir diziye dayanan bir öğe dizisini görüntüleyen bir koforeach bağlaması var. Tıkladığımda, öğe sınıfının sınıfını değiştirebiliyorum. Fikir, bu listeyi bir seçici olarak kullanmaktır: kullanıcı, üzerine tıklayarak öğeden birini seçer.

foreach aşağıdaki gibidir:

<!-- ko foreach: myItems --> 
    <div class="unselectedItem" data-bind="click: $parent.selectItem"><span data-bind="text: itemName"></span></div> 
<!-- /ko --> 

ViewModel selectItem işlevine çağrı mükemmel çalışıyor ama doğru tıklandığında öğenin sınıfını değiştirme konusunda başarılı değildir.

İlk kez div'lardan birini tıklattığımda, ancak başka bir div seçmek istediğimde, ilk tıklanan div sınıfını kaldıramayacağımda sınıfı değiştiren div üzerinde bir onCLick olayı ekleyebilirim.

Answer 1

Bu sorunu çözebileceğiniz birçok farklı yol vardır.

İşte hızlı ve kirli bir bunlardan biri:

1. sizin selectItem fonksiyonunda
2. , yeni seçim
3. Add ile gözlemlenebilir güncelleme Seçilen öğeyi depolamak için ViewModel bir ko.observable ekle a css öğelerinize aşağıdaki gibi bir cilt ekleyin: css: { 'selected' : $data === $parent.selectedItem() }

Knockout sizin için yeni bir gözlemlenebilir oluşturur çünkü css ifadesi gözlemlenebilir içeriyor. Her zaman selectedItem güncellenir, tüm css bağlamaları güncellenir. Burada bir örnek

atın: https://jsfiddle.net/snm8b9mr/

Düzenleme: Ben çok farklı şekillerde ile benim cevap başlamış diye, burada alternatif bir çözüm olan ben şahsen daha iyi gibi: https://jsfiddle.net/a45serz6/1/

O Tüm öğeleriniz için select yöntemi ve selected gözlemlenebilir ekler. numaralı tek seferde sadece tek bir seçim yapılmasını sağlayan mantık başka bir yerde yönetilir. Bu yaklaşımı kullanarak, veri bağlamanızın okunması ve yazılması biraz daha kolay olacaktır:

<li data-bind="css: {'selected': selected}, text: data, click: select"></li>