Knockout.js'de gelişmiş bağlamalar

Karmaşık uygulamaların yazılması, kodun karmaşıklığındaki artışa bağlıdır, ancak bu genellikle bir aksiyom veya yerleşik bir kural olmasa da, aslında uygulamamızın birçok küçük uygulamanın birleşimi nedeniyle karmaşık olması en iyisi olurdu, çünkü basit bir küçük uygulama, geliştiricinin hayatını daha az karmaşık hale getirecektir.

Bu durumuda Knockout.js benzer bir şey olur bağlamalarkullanarak elde edebileceğimiz davranışların olduğu bağlamalar Ancak, bu bizi biraz daha esnek hale getirdiğinden, sonuçta yüksek bir karmaşıklık yaratacaktır, bununla birlikte şunu söylemiyoruz: bağlamalar Temel bilgiler kötüdür, bizim için düzgün çalışmadıkları zamanlar vardır.

Gelişmiş bağlamalarBu yüzden kullanmalıyız gelişmiş bağlamalar, burada kendi başımıza inşa edebiliriz bağlamalar doğrudan tanımladığımız davranışlarla, bizi kodda belirli bir derecede karmaşıklıktan kurtarıp okunabilirlik kazanıyor, onu çağırmanın tek dezavantajı, bu davranışları neredeyse sıfırdan inşa etmemiz ve kodun yeniden kullanımını boş yapmamızdır.

İki veya daha fazla ViewModel'in bağlanmasını sağlayın
Bizim zaman vardır GörünümModeller mümkün olduğunca basit kalmalı, ya da belki bir GörünümModeli Uygulamamızın her sayfasında paylaşılan, her halükarda birkaç tane kullanabilme şartı GörünümModeller aynı zamanda kalır.

O nasıl çalışır?Bu konu hakkında endişelenmeden önce bunun çılgınca ve yapılması imkansız bir şey olmadığını bilmekte fayda var, aslında kodumuzun basitliğini ve okunabilirliğini uygulamada tutmak oldukça yaygın bir uygulamadır. Bunun gerçekleşmesi için yönteme yalnızca ikinci bir parametre iletmemiz gerekir. ko.applyBindings sınırlayarak bu hedefe ulaşmamıza yardımcı olacak bağlayıcı için HTML onu içeren, bu şekilde tüm uygulayabiliriz GörünümModeli herhangi bir rahatsızlık vermeden ihtiyacımız olan

Bunu mümkün kılacağımız küçük bir örnek görelim, öncelikle bir HTML nerede iki elementimiz olacak her biri bir isimle GörünümModeli farklı, bu bize başarmak istediğimiz şeyin temelini verecek ve her girdinin içine basitçe bir veri bağlama türü metin.

Zaten bölümünde JavaScript kendimizi tanımlayacağız GörünümModeli genel olarak adlandırılan bir özniteliği döndüreceğimiz yer İsim ve bunların örneğini yaparken bir görünümModel1 ve bir görünümModel2 hangi örnekleri olacak GörünümModeli farklı isimler kullanarak oluşturduğumuz genel, son olarak ko.applyBinding hangi bloğu söyleyeceğiz HTML her biri ait olmalıdır ve bu nedenle bu örneğin amacına ulaşacağız.

O halde, daha önce açıkladığımız her şeyi aşağıdaki kodda nasıl ifade ettiğimizi görelim:

 Gelişmiş Veri Bağlama

Aşağıdaki resimde örneğimizin tarayıcıda çalıştırdığımızda nasıl göründüğünü görelim:

BÜYÜT

Resimde görüyoruz ki ikimiz GörünümModeller etkin bir şekilde HTML'mizde uygulanıyorlar, her biri yönteme ikinci parametre olarak ilettiğimiz öğede yer alıyor ko.applyBindings () böylece uygulamalarımızda nasıl daha eksiksiz uygulayabileceğimiz konusunda bize fikir veriyor.

Bağlamalar ve TinyMCE
Bu örnek için gerçek dünyaya uyarlanmış bir işlevsellik oluşturacağız, bir bağlayıcı düzenleyiciyi dahil etmemize yardımcı olacak gelişmiş TinyMCE bizim HTML, bu editörün yaptığı bir arayüz oluşturmaktır. WYSIWYG, yani zengin bir metin editörü. Bu uygulamanın ana zorluğu, kendi uygulamamızı yaratmamız gerektiğidir. bağlayıcıŞimdi sahip olacağımız yeterli bir rehberimiz yoksa başımıza bir baş ağrısına neden olabilir.

GereksinimlerBu örneği gerçekleştirmek için birkaç harici kaynak indirmemiz gerekiyor, bu durumda jQuery indirmenin yanı sıra en son sürümünde TinyMCE ve onu projemize dahil edin, kaynakları elde etmek için sadece içinde hızlı bir arama yapmamız gerekiyor. Google bu yüzden bu nokta üzerinde fazla durmayacağız. İhtiyacımız olan diğer şey, adlı yeni bir dosya oluşturmaktır. kobinding.js çözümümüzün düzgün çalışabilmesi için gerekli kodu buraya yazacağız. Tüm kaynaklarımızı indirdikten ve uygulamamızdan erişebileceğimiz bir yola girdikten sonra kodumuzu yazabiliriz.

Uygulamanın yapacağı şey bize bir Ön izleme Yazdıklarımızdan bunun için metin kutumuzu yerleştireceğimiz bir form oluşturacağız. TinyMCE, her şeyi ilk durumuna döndürmek için bir sıfırlama düğmesi ve son olarak bir yazdığımız metni nereden alacağız.

Sonunda yeni dosya dahil tüm kaynaklarımızı ekleyeceğiz. kobinding.js ve bizim için gerekli kodu oluşturuyoruz GörünümModeli Birlikte gözlemlenebilir bu, metin kutumuzdaki değişiklikleri tespit etmemizi sağlar, kodumuzun neye benzediğini görelim:

 Gelişmiş Veri Bağlama TinyMCE İçeriği Sıfırla
Ön izleme

Koda bakarsak ve önceki dersleri takip edersek, bizi şüpheye düşürecek hiçbir şey olmadığını fark edeceğiz, ancak bunu tarayıcımızda çalıştırırsak, açıkladığımız şekilde çalışmayacaktır ve bunun nedeni, biz ihtiyacım olan şey bağlayıcı yeni dosyamızda özel.

Bu yeni kodun yaptığı şey, kullanıcının davranışı arasında bir bağlantıdır. TinyMCE ve bizimki GörünümModeli, bunun için adı verilen iki işlev veya yöntem oluşturacağız. içinde Y Güncelleme, yöntem için içinde Adından da anlaşılacağı gibi, bileşenimizi başlattığımızda, burada bağlayıcı ile textarea'nın TinyMCE gözlemlenebilir olanı uygulayabilmemiz için ayrıca olayı tanımlayacağız değişiklik bu, metin kutumuzun durumu ve içeriği değiştiğinde, böylece içeriği gerçek zamanlı olarak güncelleyebiliriz.

Diğer yöntem veya işlev Güncelleme, bu, içeriği yeniden oluşturma düğmesi gibi bağlantılı öğede her değişiklik olduğunda etkinleştirilir; bu, daha önce yarattığımız gözlemlenebilirin bize sağladığı şeyle doğrudan bağlantılı olmasıdır. O zaman bizim için son kodu görelim kobinding.js:

 ko.bindingHandlers.tinymce = {init: function (element, valueAccessor, allBindingsAccessor) {var tinymceOptions = {setup: function (editör) {editor.on ('change', function (olay) {valueAccessor () (event.target. içeriğe eriş ());}); }}; $ (eleman) .text (değerAccessor () ()); setTimeout (fonksiyon () {$ (eleman) .tinymce (tinymceOptions);}, 0); ko.utils ['domNodeDisposal'].addDisposeCallback (element, function () {$ (element) .tinymce ().kaldır ();}); }, 'güncelleme': function (eleman, valueAccessor, allBindings) {var tinymce = $ (element) .tinymce (), değer = valueAccessor () (); if (tinymce) {if (tinymce.getContent ()! == değer) {tinymce.setContent (değer); }}}};

Tarayıcımızda tekrar çalıştırırsak, yazma sırasında her şeyin olması gerektiği gibi çalıştığını göreceğiz ve odağı değiştirirsek, önizleme alanımızda içeriğin olması gerektiği gibi olduğunu göreceğiz:

BÜYÜT

Bununla bir oluşturabildik gelişmiş ciltleme ve küçük bir ustalıkla ve bize sağladığı tüm araçlarla elde edebileceğimiz her şeyi anlamamıza yardımcı olan kişiselleştirilmiş Nakavt. Bunun gibi vakalar TinyMCE Bu eklenti türü web uygulamalarının geliştirilmesinde çok popüler olduğu için çok yaygındırlar, bu nedenle projemizin geliştirilmesinde bir noktada benzer bir çözüm uygulamamız gerekebilir.

Bununla bu öğreticiyi bitirdik, gördüğümüz gibi kendimizi fonksiyonlarla ve önceden belirlenmiş yöntemlerle sınırlamak gerekli değil. NakavtTabii ki, bu bilgi düzeyi için hala çok ileri düzeyde olan ancak uygulama ve araştırma ile elde edilebilecek işlevler vardır. İlginç olan, tüm bunların resmi belgelerinin biraz okunmasıyla elde edilebilmesidir. Nakavt ve ayrıca kendimizi bağlam içinde göstermemize ve yerleştirmemize yardımcı olacak örnek vakalar arıyoruz.