Mithril.js Components

Bileşenler, kullanıcı arayüzünü ayrıştırarak birbirinden bağımsız ve tekrar kullanılabilen parçalar oluşturmanızı sağlar. Bu sayede her bir parçayı, birbirinden izole bir şekilde düşünerek kodlayabilirsiniz.

Bir Mithril bileşeni, view methoduna sahip bir POJO'dur. POJO Eski JavaScript Nesnesidir.

Kavramsal olarak bileşenler, JavaScript nesneler gibidir. Bileşenler, "vnodes" adındaki girdileri opsiyonel olarak alırlar ve ekranda görüntülenecek Mithril.js elementlerini geri döndürürler.

Bir bileşen oluşturmak için en basit yol, bir JavaScript POJO(Eski javascript nesne) yazmaktır:


var Example = {
    view: function(vnode) {
        return m("h2", "Hello")
    }
}

Bileşeni etkinleştirmek için m.mount Methodu kullanıyoruz.


m.mount(document.body, Example)

Çıktımız şöyle olur.


 <h2>Hello</h2>

ÇIKTI:

Birden fazla Eleman yazdırılacaksa


var root=document.body;

var Example = {
    view: function(vnode) { 
   return [
   m("h3", "Javascript Dersi"),
   m("p", "Ekran Çıktılar")
        ]
   }
}

m.mount(root, Example)


ÇIKTI:

veya bunun gibi


var root=document.body;

var Hello = {
    view: function() {
        return m("main", [
            m("h1", {class: "title"}, "My first app"),
            m("button", "A button"),
        ])
    }
}
m.mount(root, Hello)

m.mount methodu m.render methoduna benzer, ancak bazı HTML'leri yalnızca bir kez oluşturmak yerine, Mithril'in otomatik yeniden çizme sistemini etkinleştirir. Bunun ne anlama geldiğini anlamak için, bazı etkinlikler ekleyelim:


var count = 0 // Değişken oluşturuldu

var Hello = {
    view: function() {
        return m("main", [
            m("h1", {class: "title"}, "My first app"),
            // sayıyı bir artırdı
            m("button", {onclick: function() {count++}}, count + " clicks"),
        ])
    }
}

m.mount(document.body, Hello)

ÇIKTI:

Buton üzerinde count değişken, sayımı artıran (en üstünde bildirilen) bir onclick olayı tanımladık. Şimdi buton etiketinde bu değişkenin değerini de veriyoruz.

Şimdi düğmeye tıklayarak düğmenin etiketini güncelleyebilirsiniz. m.mount kullandığımızdan, count değişkenindeki değişiklikleri HTML'ye uygulamak için m.render'ı elle çağırmanıza gerek yoktur; Mithril sizin için yapıyor.

Performansı merak ediyorsanız, Mithril'in güncelleme yapmakta çok hızlı olduğu ortaya çıktı, çünkü yalnızca DOM'nin kesinlikle ihtiyaç duyduğu parçalarına dokundu. Yani yukarıdaki örneğimizde, butona tıkladığınızda, içindeki metin DOM Mithril'in gerçekte güncellenen tek kısmıdır.

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

7179

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML RESİM EKLEME
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.