Knockout.js'de Veri Bağlamayı Anlama

Bağlanma verileri ağacın farklı bölümlerindeki metin veya HTML dinamik verilerin birleşiminden başka bir şey değildir. GÜNEŞ Knockout.js'nin çalıştığı belgemizin bu, görünümlerden ve modellerden dinamik içerik oluşturmamızı sağlar.
Bu kavram, çok sayıda geliştirme çerçevesinde bulunabilir. JavaScript geliştirme mantığını ifade etmenin çok etkili bir yolu olduğundan, uygulamalarımızı yaparken nasıl çalıştığını ve hayatımızı nasıl kolaylaştırabileceğini anlamamız hayati önem taşımaktadır.
GereksinimlerTemel gereksinim, yürütebilmektir Knockout.js indirip indirmediğimizi veya bir CDN. Ayrıca bir stil sunucusuna ihtiyacımız olacak Apaçi sayfamıza hizmet etmek için ve benzeri bir metin düzenleyici Yüce metin veya uygulamalarımızın taşıyacağı belgeleri oluşturmak için NotePad ++.
görmenin en iyi yolu Bağlanma verileri bir örnekle, aşağıdaki kodda nasıl bir belge oluşturduğumuzu görelim HTML nereye dahil ediyoruz Knockout.js, sonra vücudumuzda bir etiket oluşturduk H1 içinde bir yaparız veri bağlama nın-nin HTML, bu, HTML kodunu beklediği anlamına gelir.
Parçada JavaScript basitçe yaptığımız şey bir görünüm modeli ve onunla çalışabilmek için bazı nitelikler tanımlayın. İlginç olan şu ki, bu, verileri bizimkilerden aktarmamıza izin veriyor. görünüm modeli HTML'nin bir bölümüne. Kodumuzun neye benzediğini görelim:

 knockout.js'de Veri Bağlama 

Belgemizi tarayıcımızdan çağırırken aşağıdaki sonucu alıyoruz:

Burada adı ve birazını döndüren bir yöntemi nasıl oluşturduğumuzu görüyoruz. HTML ona stil vermek için, bu sonsuz bir olasılık yelpazesine sahip olabileceğimiz anlamına gelir, ancak belki de en göze çarpan şey, bir bağlanma verileri hemen hemen her öğeye. Böylece metin, HTML vb. gönderebiliriz.
Ancak yalnızca kullanıcıya metin yazdırmamıza izin vermekle kalmaz, aynı zamanda etiketlerimize CSS, sınıflar ve nitelikler de ekleyebiliriz. HTML, statik değerler ayarlamaya gerek kalmadan sayfamızın neredeyse her yönünü kontrol etmemizi sağlar.
Aşağıdaki örnekte bir etikete nasıl özel bir sınıf verdiğimizi görelim. HTML, fikir, bir yazı tipini arayan bir uygulamamız olduğunda müdahale etmeye gerek kalmadan dinamik stiller oluşturabilmemizdir. DİNLENMEK, ancak bu durumda basitleştirmek için dinamik olarak yalnızca bir bileşen yükleyeceğiz:

 knockout.js'de Veri Bağlama 
 

Daha sonra bir bileşeni nasıl geçebileceğimizi fark ederiz. stil Metnin görünümünü tanımlayacak olan, bir sınıf da ekleyebiliriz ve son olarak metnimizi modelden çağırırız, tüm bunları aynı şekilde yaptığımızı da fark ederiz. bağlanma verileri, yalnızca farklı öğeleri virgülle ayırarak.
Yeni örneğimizi çalıştırırsak tarayıcımızdaki sonuç şu şekildedir:

BÜYÜT

kısmına özellikle dikkat edelim. hata ayıklayıcı nın-nin HTML tarayıcının öğelerinin nerede olduğunu burada görüyoruz. bağlanma verileri etkin bir şekilde etikete taşındılar.
ile kullanabileceğimiz başka özellikler de var. bağlanma verileri, bunlardan biri koşuldur, yani etiketlerimize bir öğeyi veya başka bir öğeyi yerleştirebiliriz HTML modelimizin farklı özelliklerini dikkate alarak. Bu stilin bir örneğini kullandığımız aşağıdaki kodu görelim:

 Koşullu Veri Bağlama 
 

Model görünümümüzde, onu 0'a ayarladığımız id adlı bir öznitelik tanımladık, ardından HTML bölümünde veri bağlama Üçlü bir operatör tanımladık, burada model görünümünün kimliği 0 ise 'Merhaba', aksi takdirde 'Hoşçakal' yazdırır.
Sonucunu görmek için örneği tarayıcıda çalıştıralım:

İşlemi onaylamak için kimliği başka bir değere değiştirebilmeniz ilginç bir alıştırma olacaktır, bu yüzden onu bir görev olarak bırakıyoruz.
Dikkate almamız gereken çok önemli bir şey, öğelerimizin bağlamıdır, çünkü Knockout.js hiyerarşik bir yapı kullanır Baba oğul model görünümlerinden elde ettiğimiz farklı özellikleri işlemek için.
Bu, her zaman bir ebeveyn bazında çalıştığımız anlamına gelir ve böylece özelliklerine erişebiliriz, böylece çocuğun aynı seviyedeki diğer çocuklardan farklı olan özelliklerini oluşturabilir, böylece farklı değerleri birleştirebiliriz.
Her şey bağlama göre olduğundan, önceki örneklerde kullanabileceğimizi görüyoruz. veri bağlama metni Kime ait olduğunu belirtmeye gerek kalmadan, çünkü bu olduğunda, Knockout.js hemen mevcut çocuğun bağlamını üstlenir. Uygulamamızda ele alabileceğimiz farklı bağlam türlerini aşağıda görelim:
$ kökAna bağlamdır, model görünümümüzün nereden geldiğidir, uygulamamızın herhangi bir bölümünden çağrıldığında her zaman yapımızda en hiyerarşik ve en yüksek öncelikli ilişkiyi arayacaktır, çok sayıda çocuğumuz olduğunda özeldir ve yaşlı ebeveynden bir şey istiyoruz.
$ ebeveynŞuna benzer çalışır $ kök, yalnızca öğemizin doğrudan ebeveynini ifade etmesi dışında, kapsamı bununla sınırlıdır, döngülerle çalışırken yaygın olarak kullanılır. her biri için çok çocuk yetiştirmek.
$ ebeveynlerBu bağlama çoğulların eklenmesi bize, çocuğun ebeveynlerinin her biri için bir indeks içeren bir tür düzenleme veya dizi oluşturduğumuzu söyler, bu şekilde adlandırdığımız yerden. $ ebeveynler [0] acil babadır, $ ebeveynler [1] doğrudan ebeveynin ebeveynidir vb.
$ veriKonumlandırıldığımız bağlamın verilerine erişmemizi sağlar, genellikle değişken olan içeriklerle çalışırken kullanılır ve model görünümü özelliklerimize erişmemiz gerekir.
$ indeksiYalnızca döngülerle çalıştığımızda erişilebilir her biri için ve elementimizin farklı pozisyonlarına erişmemizi sağlar.
Bir dizi öğe üzerinde yineleme yapmamız gerektiğinde, döngüyü kullanmamız gereken andır. her biri için, bu bir diziden veya bir eleman listesinden geçecektir ve bu şekilde listemizi belgede oluşturabiliriz. HTML.
Aşağıdaki örnekte, model görünümümüzde book adlı bir özelliğe sahip olacağız ve ardından onu bir her biri için bu durumda bağlam değişkenlerinden birini kullanmak $ veri, görelim:

 Veri bağlama foreach

Tarayıcının sonucunu görürsek, eğitim sırasında öğrendiğimiz tüm kavramları dikkate aldığımızda meydana gelen işlemi fark edeceğiz.

Bununla bu öğreticiyi bitiriyoruz, öğrendik ve daha derinlemesine bir temas kurduk. Knockout.jsne olduğuna dair kavramları çok derin ve sağlam bir şekilde anlamak önemlidir. bağlanma verileri, zaten model görünümlerimizin verilerini, özniteliklerini ve özelliklerini kullanma şeklimizdir. Bağlam gibi çok önemli bir kavramı da anlayabildik, şimdi farklı unsurların nasıl farklılaştığını ve nedenini anlayabiliriz. Knockout.js diğerlerine göre bazı verileri ne zaman alacağını bilir ve bunun nedeni her zaman öğelerimizin bağlamını bilmesidir.