Knockout.js'yi kullanmaya başlayın

Uygulamanın en zor kısmının istemci tarafına aktarılması giderek daha yaygın hale geliyor, bu nedenle sunucu dillerini yalnızca hizmetler aracılığıyla kalıcılığı ele alan diller haline getiriyor. DİNLENMEK.
Tüm bunların gerçekleşmesindeki sorumluluğun bir kısmı, birlikte çalışmanın yeni yollarına düşüyor. JavaScript ve farklı sayesinde dinamik ve duyarlı kullanıcı arayüzlerinin oluşturulması çerçeveler mevcut.
Bu çerçevenin düşük ağırlığı ve dokümantasyonunun yanı sıra uzun süredir piyasada olması gibi birçok güçlü yönü vardır, bu nedenle üretim ortamlarında uygulanabilecek şekilde sürekli olarak olgunlaşmaktadır.
1- Çoğu kütüphane ve çerçeve gibi JavaScript gereksinimler çok zor değil, bu durumda isteklerimizi daha iyi işlemek için küçük bir web sunucusuna ihtiyacımız olacak, bataklık içinde pencereler veya bir örneği Apaçi içinde Linux veya Mac.
2- Tarzında zengin bir metin düzenleyiciye ihtiyacımız var. Yüce metin veya Not Defteri ++ göstereceğimiz örnek ve alıştırmaları yerine getirmek için gerekli kodu yazabilmek.
3- Sonunda indirebilmek için İnternet erişimine ihtiyacımız var Knockout.js bir kere bile.
Kurulum işlemi oldukça basittir ve belirli bir platforma bağlı değildir, ister biz istersek süreç aynı olacaktır. Windows, Linux veya MAC.
Yapmamız gereken ilk şey indirmek Knockout.js resmi sayfasından bunun için proje web sitesine gidebiliriz ve İndirilenler sağ tıklayıp seçeneği seçiyoruz Linki farklı kaydet:

BÜYÜT

Dosyayı dahil etmek için projemizle ilgili bir klasöre kaydetmemiz önemlidir. Ayrıca kullanılarak da kurulabilir çardak hatta herhangi birinden kullanın CDN'ler sunucumuzu bir kütüphane deposu olarak kullanmak zorunda kalmamak için hizmetler.
Dosyayı aldıktan sonra, onu bir dosyaya dahil etmemiz yeterlidir. HTML aşağıdaki gibi:

 Knockout.js'yi yükleme 

Gördüğümüz gibi, yalnızca indirilen dosyayı bir komut dosyası etiketi aracılığıyla eklememiz gerekiyordu. sürümüyle çalışmak istersek CDN Yalnızca dosyanın İnternet yolunun yerel yolunu değiştirmemiz gerekiyor, bu, aşağıdaki gibi kitaplıklarla çalışmaya çok benzer. jQuery veya benzeri çerçeveler AngularJS.
Model Görünümü Modeli GörüntüleBu bölümün başlığı bir hata gibi görünebilir, Model Görünüm Görünüm Modelinden nasıl söz edilebilir? Aynı değil? Meğer ki Nakavt ilham aldığı bir tasarım modeline veya geliştirme paradigmasına sahiptir. MVC, kesinlikle nerede modeli ve Görünüm "klasik" yaklaşımdan bildiğimiz gibi davranırlar, ancak adı verilen yeni bir katmanımız var. GörünümModeli görüşlerimizi birleştirmekten ve işlevsellik kazandırmaktan sorumludur.
Bağlanma verileri belgeye belirtmemizi sağlayan çerçevemizin temel özelliğidir. HTML erişim izni vermeniz gereken öğeler hangileridir? Knockout.js, karmaşık bir şey gibi görünse de, daha basit bir şey olarak özetleyebiliriz, özelliklerin ağacın elemanlarına basit bir şekilde uygulanmasıdır. GÜNEŞ performansı olmasını istediğimiz yerde Knockout.js.
Aşağıdaki örnek kodu görelim, diyelim ki kendi dosyamızdan bir isim yazdırmak istiyoruz. GörünümModeli içindeki bir etikette vücut, bunun için sadece aşağıdakileri yapmamız gerekiyor:

 Knockout.js'yi yükleme 

Bunu etiketimizde görüyoruz h1 bir yayılma etiketi var ve yayılma etiketi, yerel olmayan bir özelliğe sahip HTML mülk nedir veri bağlama, bizi bağlayan şey bu Knockout.js bizimkiyle DOM ağacı bu durumda sadece özelliğin veya değişken adının bizim dosyamızdan alınması gerektiğini belirttik. GörünümModeli.
Örneğimizi tarayıcıda çalıştırırsak, aşağıdaki resimde gördüğümüz gibi bir sonuç elde edeceğiz:

Bununla zaten ilk uygulamamızı kullanarak yaptık. Knockout.js.
Şimdiye kadar felsefenin farkına varmış olmalıyız. GörünümModeli işin önemli bir parçasıdır Knockout.js, bu yüzden konuyu biraz daha araştırmaya devam edeceğiz.
VistaModel'in OluşturulmasıBir Model Görünümü oluşturmanın iki yolu vardır, temel form ve nesne yönelimli olan, kullandığımız, önerilen yol olmasına rağmen geliştirme şeklimize bağlıdır. nesne odaklı çünkü başlangıçta daha karmaşık olmasına rağmen, uygulamamızda daha iyi bir düzen elde etmemizi sağlıyor.
Oluşturmak için GörünümModeli temel olarak aşağıdaki gibi bir şey yapmamız gerekiyor:

 var myModelView = {isim: 'Pedro Perez'};

Gördüğümüz gibi, hiç karmaşık değil, sadece bir değişken tanımlıyoruz ve üzerine bir stil içeriği yerleştiriyoruz. JSON.
şimdi yol nesne odaklı içine yerleştirmek istediğimiz özelliklere erişim ve manipülasyon yöntemleri oluşturmamıza izin verir. GörünümModeli, bunun için aşağıdaki gibi bir şey yapabiliriz:

 var myOOOOOOFModelView = function () {var self = this; self.name = 'Jonathan'; self.lastname = 'Acosta'; self.getName = function () {return self.name + '' + self.soyad; };};

Bu durumda istersek doğrudan ad veya soyadına bireysel olarak ulaşabilir veya yöntemi kullanabiliriz. getName () bu bize birleştirilmiş veya birleştirilmiş ad ve soyadı verir.
Burada birçok kişi solo yapmanın daha kolay olup olmadığını merak edebilir. Sicim Ad ve soyad ile cevap çok basit, ne kadar fazla seçeneğimiz olursa, uygulama bizim görüşümüze göre o kadar basit olur, sadece adı istediğimizi hayal edin, temel formla dizeyi işlemek zorunda kalacağımızı hayal edin. onları ayırabildiğimizde, nesne yönelimli değişimde yalnızca bizi ilgilendiren özelliğe erişiriz.
Şimdiye kadar gördüklerimiz çok statik, ya şimdi parametreleri kullanmaya başlarsak, bu şekilde bir GörünümModeli Kendimizi kurduklarımızla sınırlamayacağımız için birçok amaca hizmet edebilir, ancak duruma göre verileri değiştirebiliriz.
şeklimizi yeniden yazalım nesne odaklı, ve aşağıdaki formu kullanacağız:

 var myOOOOOOOFModelView = function (ad, soyad) {var self = this; self.name = isim; öz.soyad = soyadı; self.getName = function () {return self.name + '' + self.soyad; };};

Gördüğümüz gibi, parametrelerin kullanımını uygulamak çok kolaydı, şimdi bunu ilk örneğimizde uygulayacağız ve böylece her şeyin nasıl yerine oturduğunu göreceğiz, bunun için aşağıdaki HTML kodunu kullanacağız:

 Knockout.js'yi yükleme 

Burada ilk dikkatimizi çeken şey, veri bağlama artık değil Metin ilk örnekte olduğu gibi kullanmazsak html, bu etiketler göndermemizi sağlar html ve böylece yanıtımıza daha fazla stil verebiliyoruz. GörünümModeli.
Zaten bizim tanımladığımız bölümde GörünümModeli uygulamadan önce görüyoruz bağlayıcı nın-nin Nakavt.js, ViewModel'imizin bir örneğini yapıyoruz nesne odaklı, Bu noktada parametrelerimize veya özelliklerimize değerleri verebiliyoruz, gördüğümüz gibi ad ve soyad ayrımımızı koruduk ama sonunda onları birleştiren yöntemi kullanabiliriz.
Örneğimizi çalıştırdığımızda, tarayıcıda bize aşağıdaki sonuçları veriyor:

Bu çerçevenin zaten sunmadığı neler var diye merak edenler olacaktır. AngularJS veya Backbone.js, ve sorgulamalarında haklılar, ancak onlara verdiğimiz cevap, ellerinde olabilecek bir seçenek daha olduğu, iyi dokümantasyon ve uygulamasının düşük ağırlığı gibi güçlü yanlarına sahip olduğu (sadece yaklaşık 20 kb), Ancak her şey gibi, herkes hedeflerine ulaşmalarını sağlayan ve o anın gereksinimlerine en uygun aracı seçmekte özgürdür.
Bununla öğreticimizi bitiriyoruz, ilk adımlarımızı başarıyla attık. Knockout.js, bununla, bu uygulama geliştirme çerçevesinin bize istemci tarafı mantığıyla sunduğu tüm olasılıkları düşünmeye başlayabiliriz.