Çoğu web uygulaması için, formlar aracılığıyla kullanıcı girdisini toplayabilmek ana işlevidir, ancak uygulama sunucuya veri gönderemiyor veya alamıyorsa bu bir kenara bırakılabilir.
Bu yüzden sunucu taraflı diller veya bir JSON bu görevde bize yardımcı olmak için, bu eğitimin amaçları için nerede kullanacağız jQuery sunucu tarafı dilinin yerini alacak ve bize modelimizde işlenecek veri girişi sağlayacak bir JSON'un işlenmesini gerçekleştirmek için bir JavaScript çerçevesi olarak.
Gereksinimler
sahip olmamız gerekecek Knockout.js sistemimizde ve oluşturacağımız uygulamalar için erişilebilir, ayrıca ihtiyacımız olan jQuery yerel olarak veya CDN'nizden kullanabileceğimiz. Dosya yazma izinleri, elimizde yoksa kütüphaneleri elde etmek için İnternet bağlantısı ve aşağıdaki gibi bir metin düzenleyici Yüce metin veya NotePad ++. Uygulamaları çalıştırmak için bir web sunucusu tipine ihtiyacımız var. Apaçi veya Nginx test ortamımızda.
Doğrudan uygulama üzerinde çalışmaya başlayacağız ve örneklerde kullanılan bazı kavramları incelemeyeceğiz, bu nedenle dinamik değişiklikleri, form işlemeyi ve tabii ki bağlamaları içeren öğreticileri gözden geçirmenizi öneririz. Knockout.js.
Harici verileri okuma
Kütüphanesini içerecek basit bir HTML belgesi oluşturacağız. Knockout.js birlikte jQuery. Yapmayı unutmadan formumuzu oluşturacağız. bağlamalar içindeki unsurların ve nihayet bizim için mantıkta GörünümModeli Formumuzdaki değişiklikleri gözlemlenebilirlerle işlemek için bir fonksiyon oluşturacağız, HTML kodumuzu görelim:
Harici veriGördüğümüz gibi bir belgemiz var. HTML İki metin alanı ve bir seçim listesinden oluşan birkaç elemanla basit ve eğer gözlemcilersek, gözlemlenebilirlerimizin eşit derecede boş olduğunu görebiliriz, bitirmek için ilk formumuzun neye benzediğini görelim:Ad Soyad:
Soyadı:
Favori aktiviteler:Veri yükle
Formumuz olduğu için örneğimizi anlamlandırmamız gerekiyor ve uygulamamıza harici veri yükleyebiliyoruz, bu yüzden gözlenebilirlerimiz boş. adlı jQuery yöntemini kullanalım. $ .getJSON () hangi alır JSON Girdi olarak, sunucu taraflı bir dille çalışıyorsak, onu üretecek dosyanın yolunu aşağıdaki gibi çıktı olarak belirtmeliyiz:
self.loadUserData = function () {$ .getJSON ("/ get-user-data", function (veri) {alert (data.name);}); }İşleri karmaşıklaştırmamak için bir JSON Uygulamamız içinde zaten oluşturulmuş, bunun için aşağıdaki yapıda, istenirse değerlerini değiştirebilen bir tane oluşturuyoruz:
{"ad": "Ad", "soyadı": "Soyadı", "faaliyetler": ["Bisiklet", "Video oyunları", "Web geliştirme"], "hobiler": "Okuma"}Şimdi bir önceki fonksiyonumuzu değiştirip ona parametre olarak JSON dosyamızın adını gönderebiliriz, bakalım:
self.loadUserData = function () {$ .getJSON ("user_information.json", function (veri) {alert (data.name);}); }Bu işlevi kodumuza ekleyerek yöntemimizin nasıl çalıştığını doğrulayabiliriz. $ .getJSON () ve böylece içindeki değerlerden birini elde edin, butona basıldığında uygulamamızın yanıtı Verileri yükleyin, sadece adı gösterecektir.
Metodumuzun mükemmel çalıştığını gördüğümüz için, şimdi yapmamız gereken sadece JSON'umuzun değerlerini aldıktan sonra fonksiyonumuza dahil etmek. GörünümModeli ve formumuzun tanımlayıcıları ile yazışmaları yapın, son kodumuzun nasıl göründüğünü görelim:
function UserViewModel () {var self = bu; self.name = ko.gözlenebilir (""); self.lastname = ko.gözlenebilir (""); self.aktiviteler = ko.observableArray ([]); öz.hobiler = ko.gözlemlenebilir (""); self.loadUserData = function () {$ .getJSON ("user_information.json", function (veri) {self.name (data.name); self.lastname (data.lastname); self.activities (veri.aktiviteler); kişisel.hobiler (veri.hobiler);}); }} ko.applyBindings (yeni UserViewModel());Şimdi sadece örneğimizi tarayıcıda çalıştırmamız ve düğmesine basmamız gerekiyor. Veri yükle formumuzdaki alanları hemen doldurması gereken değerlerle JSON, görelim:
Gördüğümüz gibi, mükemmel çalıştı ve birkaç basit kod satırında harici verileri okuyabildik. Bu, uygulamamızın kullanılabilirliği ve işlevselliği açısından oldukça faydalıdır ancak biraz daha fazlasını yapabiliriz, verileri bir JSON'da saklayabilir ve böylece uygulamamızın işlevselliğini genişletebiliriz.
Verilerin saklanması
Geleneksel web uygulamaları için verileri JSON biçiminde depolamak, nesneleri bu biçime dönüştürmek ve bunları sunucuya göndermek kadar basittir, ancak Knockout.js konu biraz daha karmaşık çünkü GörünümModeli normal JavaScript özellikleri yerine gözlemlenebilirleri kullanın, çünkü gözlemlenebilirler işlevlerdir ve bunları seri hale getirip sunucuya göndermeye çalışmak beklenmedik sonuçlara yol açabilir.
ko.toJSON ()Bu durumlar için şanslıyız, çünkü Knockout.js basit ve etkili bir çözüm sağlar, işlev ko.toJSON (), gözlemlenebilir nesnelerin tüm özelliklerini geçerli değerleriyle değiştirir ve sonucu biçimde bir dize olarak döndürür JSON.
Bu yeni işlevi uygulamamızda uygulamak için formumuzda adlı yeni bir düğme oluşturacağız. Veri kaydet ve fonksiyonumuz bağlanacak veri kaydetDeğişikliklerle kodumuzun nasıl göründüğüne bakalım:
Harici veriÖrneğimizi tarayıcıda çalıştırırsak, nasıl yeni bir düğmemiz olduğunu görüyoruz, istersek değiştirebileceğimiz değerlerimizi yüklüyoruz. Son olarak formumuzdaki değerleri string formatında bize göstermesi gereken ilgili butona basıyoruz. JSON, nasıl göründüğüne bir bakalım:Ad Soyad:
Soyadı:
Favori aktiviteler:Veri yükle
Veri kaydet
BÜYÜT
Son olarak bu verinin sunucumuzdaki bir scripte gönderilmesini istiyorsak sadece yeni oluşturduğumuz fonksiyonumuzda ve metodu kullanırken bazı değişiklikler yapmamız gerekiyor. $ .post işlemi tamamlıyoruz, bitirmek için neye benzediğini görelim:
self.gsaveData = function () {var data_submit = {userData: ko.toJSON (self)}; $ .post ("/ save-data", data_send, function (data) {alert ("Bilgiler sunucuya gönderildi");}); }
Modelleri Görüntülemek için Veri Eşleme
JSON ile işlendiği sürece, sağlam uygulamalar yapmak ve sunucu tarafında dilden bağımsız her türlü çözümü uygulamak için ihtiyacımız olan tek şey bir JSON'dan gelen bilgilerimizi işleme şeklimizdir.
Ancak biraz daha ileri gidebilir ve JSON verilerini sunucudan sunucumuza otomatik olarak eşleyebiliriz. GörünümModeli ve bunu bir eklenti ile başarabiliriz Knockout.js isminde nakavt-haritalama. Kullanmaya başlamak için önce GitHub'daki deposundan indirmeli, projemiz içinde açmalı ve bağımlılık eksikliğinden kaynaklanan hataları önlemek için çerçevemizin arkasına eklemeliyiz.
Şimdi sadece kodumuzu değiştirmemiz ve butonumuzu kaldırmamız gerekiyor. Veri yükletüm mantığın yanı sıra Knockout.js, eklentimiz sayesinde bilgiye ulaşmak çok daha kolay olacağından, son kodumuza bakalım:
Harici veriGördüğümüz gibi mantığımız sadece üç satır koda indirildi, uygulamamız yüklendiğinde ne yapıyor, hemen istekte bulunuyor. Ajax arasında JSON bu, formumuzun öğelerine karşılık gelmelidir. Bu, yerel nesneleri alır JavaScript ve tüm bu kod satırlarından kaçınarak ve yalnızca uygulamamızı daha sağlam değil, kodumuzu da daha okunabilir hale getirerek her özelliği gözlemlenebilir hale getirir.Ad Soyad:
Soyadı:
Favori aktiviteler:
Bitirmek için uygulamamızı çalıştırırsak formumuzda değerlerimizin nasıl otomatik olarak yüklendiğini ve isteği görebiliyoruz. Ajax tarayıcı konsolunu kullanırsak JSON yanıtıyla birlikte:
Bu öğreticiyi bu şekilde bitirdik, nasıl olduğunu görebileceğimiz Knockout.js kullanılan sunucu tarafı dilinden bağımsız olarak bize veri gönderme ve depolama yolu sunar, bu bize yalnızca sunucunun dilini değiştirerek uygulamamızda daha fazla özgürlük sağlar. PHP, Ruby veya Python birkaç isim.
