Knockout.js'de formlarla çalışma

Formlar, herhangi bir uygulamanın veya web sayfasının ayrılmaz bir parçasıdır, çünkü kullanıcı verilerini yerel olarak elde etmemizi sağlayan araçlardan biri olduğundan, bu onları işlemeyi çok yaygın bir görev haline getirir.
Knockout.js nesnenizle çalışmamıza izin verir veri bağlama bir formu oluşturabilen tüm öğeler, böylece doğrulama, olayları tetikleme, gözlemlenebilirleri atama vb. Bu, istemci tarafı form işlemeyi uygulanabilir kılar ve bu nedenle, sunucu tarafına ulaşmadan önce ek bir doğrulama katmanı ekleriz.
Gereksinimlersadece sahip olmamız gerekecek Knockout.js sistemimizde ve oluşturacağımız uygulamalara erişim, dosya yazma izinleri, kütüphanelerimiz yoksa kütüphaneleri elde etmek için internet bağlantısı ve aşağıdaki gibi bir metin editörü Yüce metin veya Not Defteri ++. Uygulamaları çalıştırmak için bir web sunucusu tipine ihtiyacımız var. Apaçi veya Nginx test ortamımızda.
Uygulayabileceğimiz vakalarla ilgili örneklere geçmeden önce aşağıdakileri bilmek çok önemlidir. veri-bağları uygulamamızın form öğeleriyle çalışabilen, bu şekilde neleri başarabileceğimiz ve neleri başaramayacağımız hakkında bir fikir edinmeye başlayabiliriz, özellikle uygulamamızın düzgün çalışması için ihtiyacımız olan sonuçları elde edebileceğimiz yollar:
Veri bağlama değeriBu, değerler veya seçim giriş öğelerinde kullanılır, bunlar giriş, metin alanı veya seçme öğeleri olabilir, bununla öğenin değerini kullanmamız gereken anda yakalayabiliriz.
Veri bağlama textInputDoğu bağlayıcı input ve textarea öğeleriyle birlikte kullanılır, işlevi şuna benzer: değer Ancak buna bir gözlenebilir atadığımız takdirde, eleman değiştiğinde, örneğin odağı kaybettiğinde bize değer veren değerin aksine, kullanıcı eleman ile etkileşime girdikçe değerleri yakalayabiliriz.
Veri bağlama kontrol edildiTürün elemanları ile kullanılır onay kutusu Y radyo düğmeleriAdından da anlaşılacağı gibi, bahsedilen elemanları kullanan bir yapıda bir elemanın seçilip seçilmediğini belirlememizi veya bilmemizi sağlar.
Veri bağlama seçenekleriBunu kullanarak bağlayıcı Bir select öğesini formda göstereceği seçeneklerle doldurabiliriz, dinamik olarak bir seçenekler kataloğu yapmak istediğimizde mükemmeldir.
Veri bağlama seçiliSeçeneklerAyrıca select öğesine özel, özelliği ayarlarken seçili seçenekleri ayarlamamız gerektiğinde kullanılır. çok, bir seferde birden fazla seçenek seçmemiz gerektiğindenz.
Veri bağlama etkinleştirme / devre dışı bırakmaFormun farklı öğelerinden herhangi birini etkinleştirmemize veya devre dışı bırakmamıza izin verir, bununla, herhangi bir özel koşul altında uygulama akışında kullanılması gerekli değilse, bir öğeyi kaldırabiliriz. etkinleştirme etkinleştirmeye hizmet eder ve devre dışı bırakmak Devre dışı bırakmak için, her kelimenin anlamını bilmiyorsak.
Bunlardan en ilginci veri-bağları iki şekilde çalışıyorlar, yani bir elemanda bir değişiklik olduğunda onu model görünümümüzde alabilir ve gerekirse bazı işlemler yapabiliriz, ayrıca bir gözlenebilirimiz varsa ve uygulamadan bir şeyler yapmak istiyorsak forma, kullandığımız sürece herhangi bir problem olmadan da yapabiliriz. veri bağlama form elemanının türü için uygundur, çünkü Knockout.js kodlu bir tarayıcının yapabileceği gibi hatalı talimatları yorumlamaz HTML.
Şimdi bu öğreticinin önceki bölümünde bahsettiğimiz tüm kavramları nasıl kullanabileceğimize dair pratik bir örnek görelim, bir type öğesi oluşturacağız. metin alanı sadece 140 karakter kabul edeceğinden, bu kısıtlama mevcut olduğu için, yazarken kaç karakter kaldığını kullanıcıya bildirmeliyiz.
Kullanacağımız mantık çok basit, veri bağlama textInput formumuzun textarea öğesinde, ardından model görünümümüzde onu gözlemlenebilir olarak ayarlayacağız ve böylece kullanıcı yazarken karakterleri yakalamaya başlayabiliriz. Sonunda bir eleman kullanıyoruz hesaplanmış Kalan karakterlerin toplamı ile gözlemlenebilir bir kompozit oluşturmak için şu anda kullanıcıyı daha az yazmaya zorlamayacağız, sadece karakterler hakkında bilgilendireceğiz. Örneğimiz için koda bakalım:

 knockout.js'deki formlar
Bir metin girin

Kalan karakterler: 

kullanmadığımızı belirtmek gerekir. veri bağlama değeri çünkü kullanıcı yazarken meydana gelecek kalan karakter miktarının değişmesine ihtiyacımız var, çünkü aksi takdirde yalnızca başka bir öğeye geçtiği andaki miktarı belirtebilirdik ve bu, kullanırken hedeflediğimiz şey için optimal olmazdı. Knockout.jsAncak, bu tür davranışların gerekli olduğu durumlar olacaktır, hepsi uygulamamızın neye ihtiyacı olduğuna bağlıdır. Şimdi tarayıcıda çalıştırdığımızda örneğimizin nasıl göründüğünü görelim:

Tabii burada sayacımızın nasıl düştüğünü dinamik olarak göremiyoruz ama kalan karakterlerin sayacımızı yazdığımızda formun textarea elemanına yazıldığı gibi güncelleniyor:

Formlarla çalışırken uygulamalarımızda sıklıkla ihtiyaç duyduğumuz bir başka özellik de olaylardır, çünkü onlarla kullanıcı tıklama gibi belirli bir şey yaptığında veya fareyi belirli bir bölümün üzerine getirdiğimizde eylemleri tetikleyebiliriz. HTML. Formlarımızda kullanabileceğimiz bazı olaylara bakalım:
Etkinlik gönderBu olay yalnızca öğede kullanılabilir biçim, ve kullanıcı formu sunucuya bir girdi gönderme yoluyla veya başka bir yöntemle gönderdiğinde etkinleştirilir.
Tıklama etkinliğiBu olay eski bir tanıdıktır, adından da anlaşılacağı gibi uygulamamızdaki bir öğeye tıkladığınızda etkinleşir.
HasFocus etkinliğiBu olay, bir eleman genellikle input, textarea veya select kullanıcı tarafından seçildiğinde ve o anda aktif olduğunda tetiklenir.
Ayrıca, mevcut olan diğer olayları kullanma olasılığı da vardır. GÜNEŞ Örneğin fareyle üzerine gelmek, tuşa basma model görünümümüzün işlevselliğini bu seviyelere genişletmek için.
Aşağıdaki alıştırmada, edindiğimiz olaylarla ilgili bilgileri uygulayacağız, bir listeye sahip olacağımız küçük bir form oluşturacağız ve fareyi bir seçeneğin üzerine her getirdiğimizde, bir görüntü olacaktır. görüntülendiğinde, elbette bu bir örnek uygulama olacak ve üretime uygun değil, ancak üzerinde çalıştığımızı anlamamıza yardımcı oluyor.
Bu durumda ayrıca ihtiyacımız olacak Knockout.js kütüphanesi jQuery uygulamamızda bazı efektleri kullanmak için idealdir, bu nedenle ideal olanı indirmek ve sahip olduğumuz klasör veya dizine kaydetmektir. Knockout.js, ya da belki onu CDN resmi. O zaman ihtiyacımız olan kodu görelim:

 knockout.js'deki formlar

Burada basitçe yaptığımız şey, bir açıklama ve resim içeren şeylerin bir listesini oluşturmaktır, bu resim uygulama tarafından herhangi bir yerde erişilebilir olabilir, bu durumda kök dizinini seçtik, sonra resmi bir dizine ekleyen bir işlev yarattık. ile seçici jQuery böylece aynı şeyi gösterebiliriz GÜNEŞ.
bölümünde HTML listeye ait elemanlar ile bir liste oluşturduğumuzu görüyoruz. şey ve son olarak olayın olduğunu belirtiyoruz fareyle üzerine gelmek ve bu olay meydana geldiğinde yürütülecek işlev. Tarayıcımızda çalıştırdığımızda uygulamamızın nasıl göründüğüne bakalım:

Daha sonra, fare imlecini bazı metinlere hareket ettirirsek, ilgili resim yüklenir ve örneğimizin işlevselliğini görebiliriz:

Elbette dinamik bir değişim olduğu için değişimi takdir edemeyiz ancak imleci bir üst öğeye hareket ettirirsek görüntü değişecektir. Bununla, formların çalışmasına daldığımız bu öğreticiyi bitirdik. Knockout.js, bize kullanıcılarımızdan gelen verilerin yakalanmasını ve doğrulanmasını geliştirmek için araçlar sağlıyor.