Backbone.js - El Elemanı

Şu anda biliyoruz ki, Backbone.js Modelle yapılandırılmış bilgiyi nasıl sunacağız mantığıyla çalışırlar, bunu uygulamamızda nasıl ifade ettiğimiz sorusu ortaya çıkar, yaptığımız işin unsurları ile çalışmaktır. DOM ağacı ekleyebilmemiz için Javascript şablonumuzdaki farklı içerikler.
Bu hedeflere ulaşmak için şu öğeye sahibiz: "NS" hangi adını ifade eder DOM öğesi görüşümüzün bir parçasını tanımladığımız şeyle.
Nedir"?
Bu öğe, görüşümüzün merkezi bileşeni veya özelliğidir, çünkü DOM öğesi görüşlerin bulunması zorunludur. Görüntüleme kullanımı "NS" içeriği oluşturduğumuz ve daha sonra DOM'a eklenmeye devam edecek olan özellik olarak.
ilişkilendirmenin iki yolu vardır. DOM öğesi görme ile, ilk yeni bir tane oluşturuyor ve onu DOM'a ekliyor ve Saniye sayfa içinde mevcut olana atıfta bulunuyor.
Yeni bir eleman oluşturmaYeni bir eleman yaratmak istiyorsak, özellikleri kullanmalıyız: tagName, id ve className, bu şekilde çerçeve bizim için yeni öğeyi oluşturmaktan sorumlu olacak ve söz konusu öğeye referansta mevcut olacaktır. mülkiyet "the", ayrılmamız durumunda etiket adı varsayılan olarak boş bir div olarak oluşturulacaktır.
Şimdiye kadar öğrendiklerimizi takdir edebileceğimiz aşağıdaki kodu görelim:

 var TasksView = Backbone.View.extend ({tagName: 'ul', // gereklidir ancak boş bırakırsak div className: 'container' olarak alınır, // isteğe bağlıdır ancak birden fazla sınıf kimliği atayabiliriz: 'görev', // isteğe bağlı}); var TasksView = new TasksView(); konsol.log (tasksView .el); // yazdıracak

Gördüğümüz gibi, temel bir şekilde, genişleterek veya miras alarak bir görünüm oluşturuyoruz. Omurga.Görünüm, sonra belirtilen özelliklerle onlara bir değer atarız, sonunda somutlaştırırız ve bir konsol.log () sonucu görüyoruz.
Aşağıdaki resimde bunun bizim sistemimizde nasıl göründüğünü gösterebiliriz. krom konsol:

Burada etiketli bir öğeyi nasıl oluşturabileceğimizi görüyoruz.

görünüm yapımızda belirttiğimiz.
SetElement yöntemi
Bu yöntem, görünümü zaten var olan farklı bir DOM öğesine uygulamak istediğimizde kullanılır, ardından yeni bir referans oluşturacaktır. $, orijinal öğeye bağlı olmayacak, ancak yenisine işaret edecek, tüm bunlar dediğimiz olaya bağlı olarak.
Bunu nasıl uyguladığımızı aşağıdaki kodda görelim:


 // Düğmeleri temsil eden iki DOM öğesi oluşturuyoruz var button1 = $ (''); var button2 = $(''); // Yeni bir görünüm tanımlıyoruz var View = Backbone.View.extend ({events: {click: function (e) {console.log (view.el === e.target);}}}); // Görünümün bir örneğini oluşturuyoruz ve onu button1 öğesine uyguluyoruz // to button1 var view = new View ({el: button1}); // Şimdi görünümü button2 öğesine setElement view.setElement (button2) yöntemiyle uyguluyoruz; button1.trigger ('tık'); button2.trigger ('tık'); 


Bu, olay üzerinde yürüttüğümüzde gerçek bir değer döndürmelidir. button2 öğesi Görünüm değiştirildiğinden, öğreticiyi bitirmek için yukarıda açıklananlara atıfta bulunan resmi görelim:




Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.