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.