KnockoutJS - Bildirime Dayalı Bağlamalar

KnockoutJS'de bildirime dayalı bağlama, verileri UI'ye bağlamanın güçlü bir yolunu sağlar.

Bağlamalar ve Gözlemlenebilirler arasındaki ilişkiyi anlamak önemlidir. Teknik olarak bu ikisi farklı. ViewModel ve KnockoutJS, View'un bağlamasını doğru şekilde işleyebildiği için normal JavaScript nesnesini kullanabilirsiniz.

Gözlemlenebilir olmadığında, kullanıcı arayüzünden gelen mülk yalnızca ilk kez işlenir. Bu durumda, temeldeki veri güncellemesine göre otomatik olarak güncellenemez. Bunu başarmak için, bağlamalara Gözlemlenebilir özelliklere atıfta bulunulmalıdır.

Bağlama Sözdizimi

Bağlama 2 maddeden oluşur, bağlayıcı name ve value. Aşağıdaki basit bir örnektir -

Today is : <span data-bind = "text: whatDay"></span>

Burada metin, bağlama adı ve whatDay, bağlama değeridir. Aşağıdaki söz diziminde gösterildiği gibi, virgülle ayrılmış birden çok bağlamanız olabilir.

Your name: <input data-bind = "value: yourName, valueUpdate: 'afterkeydown'" />

Burada, her tuşa basıldıktan sonra değer güncellenir.

Bağlayıcı Değerler

Bağlama değeri bir single value, literal, bir variable veya olabilir JavaScriptifade. Bağlama bazı geçersiz ifadelere veya referansa atıfta bulunuyorsa, KO bir hata üretir ve bağlamayı işlemeyi durdurur.

Aşağıda birkaç bağlama örneği verilmiştir.

<!-- simple text binding -->
<p>Enter employee name: <input   -bind = 'value: empName' /></p>

<!-- click binding, call a specific function -->
<button data-bind="click: sortEmpArray">Sort Array</button>

<!-- options binding -->
<select multiple = "true" size = "8" data-bind = "options: empArray , 
   selectedOptions: chosenItem"> </select>

Aşağıdaki noktalara dikkat edin -

Beyaz boşluklar herhangi bir fark yaratmaz.
KO 3.0'dan başlayarak, bağlanmaya tanımsız bir değer verecek olan bağlama değerini atlayabilirsiniz.

Bağlayıcı Bağlam

Geçerli bağlamalarda kullanılan verilere bir nesne tarafından referans verilebilir. Bu nesnenin adıbinding context.

Bağlam hiyerarşisi KnockoutJS tarafından otomatik olarak oluşturulur ve yönetilir. Aşağıdaki tablo, KO tarafından sağlanan farklı tipte bağlanma bağlamlarını listeler.

Sr.No.	Bağlayıcı Bağlam Türleri ve Açıklama
1	$root Bu her zaman en üst düzey ViewModel'i ifade eder. Bu, ViewModel'i manipüle etmek için üst düzey yöntemlere erişmeyi mümkün kılar. Bu genellikle ko.applyBindings'e iletilen nesnedir.
2	$data Bu özellik çok benziyor thisanahtar kelime Javascript nesnesinde. Bağlama bağlamındaki $ data özelliği, geçerli bağlam için ViewModel nesnesini ifade eder.
3	$index Bu özellik, bir foreach döngüsü içindeki bir dizinin geçerli öğesinin dizinini içerir. $ Endeksinin değeri, temeldeki Gözlemlenebilir dizi güncellendiğinde otomatik olarak değişecektir. Açıkçası, bu bağlam yalnızcaforeach bağlamalar.
4	$parent Bu özellik, üst ViewModel nesnesine başvurur. Bu, dış ViewModel özelliklerine iç içe bir döngünün içinden erişmek istediğinizde kullanışlıdır.
5	$parentContext Üst düzeyde bağlı olan bağlam nesnesi denir $parentContext. Bu farklı$parent. $ parent, veriyi ifade eder. Oysa $ parentContext bağlama bağlamını ifade eder. Örneğin, bir iç bağlamdan dış foreach öğesinin dizinine erişmeniz gerekebilir.
6	$rawdata Bu bağlam, mevcut durumda ham ViewModel değerini tutar. Bu $ veriye benzer, ancak aradaki fark, ViewModel Gözlemlenebilir'e sarılırsa, $ veri sadece sarmalanmamış olur. ViewModel ve $ rawdata, gerçek Gözlenebilir veriler haline gelir.
7	$component Bu bağlam, belirli bir bileşenin içindeyken o bileşenin ViewModel'ine atıfta bulunmak için kullanılır. Örneğin, bileşenin şablon bölümündeki mevcut veriler yerine ViewModel'den bazı mülklere erişmek isteyebilirsiniz.
8	$componentTemplateNodes Bu, belirli bir bileşen şablonunun içindeyken söz konusu bileşene aktarılan bir dizi DOM düğümünü temsil eder.

Aşağıdaki terimler de bağlayıcı olarak mevcuttur, ancak gerçekte bağlayıcı bağlam değildir.

$context - Bu, mevcut bağlama bağlam nesnesinden başka bir şey değildir.
$element - Bu nesne, geçerli bağlamda DOM'daki bir öğeyi ifade ediyor.

Metin ve Görünümlerle Çalışma

Aşağıda, metin ve görsel görünümlerle ilgilenmek için KO tarafından sağlanan bağlanma türlerinin bir listesi bulunmaktadır.

Sr.No.	Bağlama Tipi ve Kullanımı
1	visible: Belirli koşullara bağlı olarak HTML DOM öğesini göstermek veya gizlemek için.
2	text: Bir HTML DOM öğesinin içeriğini ayarlamak için.
3	html: Bir DOM öğesinin HTML biçimlendirme içeriğini ayarlamak için.
4	css: CSS sınıflarını bir öğeye uygulamak için.
5	style: Bir öğenin satır içi stil niteliğini tanımlamak için.
6	attr: Bir elemana dinamik olarak nitelikler eklemek için.

Kontrol Akışı Bağlamalarıyla Çalışma

Aşağıda, KO tarafından sağlanan Kontrol Akışı Bağlama türlerinin bir listesi bulunmaktadır.

Sr.No.	Bağlama Tipi ve Kullanımı
1	foreach: Bu bağlamada, her dizi öğesine bir döngüde HTML biçimlendirmesinde başvurulur.
2	eğer: Koşul doğruysa, verilen HTML biçimlendirmesi işlenecektir. Aksi takdirde, DOM'dan kaldırılacaktır.
3	ifnot: If'nin olumsuzlanması. Koşul doğruysa, verilen HTML biçimlendirmesi işlenecektir. Aksi takdirde, DOM'dan kaldırılacaktır.
4	ile: Bu bağlama, belirtilen nesnenin bağlamındaki bir nesnenin alt öğelerini bağlamak için kullanılır.
5	bileşen: VEYA bileşen: Bu bağlama, bir bileşeni DOM öğelerine eklemek ve isteğe bağlı olarak parametreleri iletmek için kullanılır.

Form Alanı Bağlamalarıyla Çalışma

KO tarafından sağlanan Form Alanları Bağlama türlerinin listesi aşağıdadır.

Sr.No.	Bağlama Tipi ve Kullanımı
1	tıklayın: Bu bağlama, bir tıklama temelinde bir DOM öğesiyle ilişkilendirilmiş bir JavaScript işlevini çağırmak için kullanılır.
2	event: Bu bağlama, belirtilen DOM olaylarını dinlemek ve bunlara bağlı olarak ilişkili işleyici işlevlerini çağırmak için kullanılır.
3	gönderme: Bu bağlama, ilişkili DOM öğesi gönderildiğinde bir JavaScript işlevini çağırmak için kullanılır.
4	enable: Bu bağlama, belirli bir koşula göre belirli DOM öğelerini etkinleştirmek için kullanılır.
5	devre dışı bırak: Bu bağlama, parametre doğru olarak değerlendirildiğinde ilişkili DOM öğesini devre dışı bırakır.
6	değer: Bu bağlama, ilgili DOM öğesinin değerini ViewModel özelliğine bağlamak için kullanılır.
7	textInput: Bu bağlama, metin kutusu veya metin alanı ve ViewModel özelliği arasında 2 yönlü bağlama oluşturmak için kullanılır.
8	hasFocus: Bu bağlama, bir HTML DOM öğesinin odağını ViewModel özelliği aracılığıyla manuel olarak ayarlamak için kullanılır.
9	kontrol edildi: Bu bağlama, kontrol edilebilir bir form öğesi ile ViewModel özelliği arasında bir bağlantı oluşturmak için kullanılır.
10	seçenekler: Bu bağlama, seçilen bir öğenin seçeneklerini tanımlamak için kullanılır.
11	selectedOptions: Bu bağlama, şu anda çoklu liste seçim formu denetiminde seçilen öğelerle çalışmak için kullanılır.
12	uniqueName: Bu bağlama, bir DOM öğesi için benzersiz bir ad oluşturmak için kullanılır.