Mithril.js State Nedir?

Nitelikler POJO(Eski JavaScript Nesnesidir.) içerisinde tanımlanan değişkenlerdir. Nesne içerisinde kullanıldıklarından dolayı nitelik ismini almışlardır. Çünkü değişkenler Nesne içerisinde o nesnenin bir özelliği kabul edilir. Bunu bir insanın boyu, bir sınıfın mevcudu gibi düşünebilirsiniz.

State bulunduğu Mithril.js componentine özgü değerleri yazdırmak ile yükümlüdür. Bu tutulan değerler, fonksiyon, string, integer, array, object olabilir.

POJO component state

Genellikle bileşen durumunu yönetmek için kapak(closure) kullanmanız önerilir. Bununla birlikte, bir POJO'da durumu yönetmek için bir nedeniniz varsa, bir bileşenin durumuna üç yolla erişilebilir: başlangıçta bir plan olarak, bileşen yöntemlerinde anahtar kelime aracılığıyla vnode.state ve this aracılığıyla.

Aşağıdaki örnekte Deneme bileşenin data Niteliği vnode.state nesnesinin bir özelliği haline gelir.


var Deneme = {
    data: "javascript Ders",
    
    view: function(vnode) {
        return m("div", vnode.state.data)
    }
}

m.render(document.body,m(Deneme));

//HTML çıktı
//<div>javascript Ders</div>

ÇIKTI:

Vnode.state hakkında

Gördüğünüz gibi, duruma vnode.state tüm view bileşenlerin yönteminin yanı sıra tüm lifecycle methods(yaşam döngüsü yöntemlerinde) kullanılabilen özellik üzerinden de erişilebilir.


var Test = {

    oninit: function(vnode) {
        vnode.state.data = vnode.attrs.text
    },
    view: function(vnode) {
        return m("h2", vnode.state.data)
    }
}

m.render(document.body,m(Test, {text: "Hello"}));

// Equivalent HTML
// <h2>Hello</h2>


This Keyword(Anahtar) Kelime ile

Duruma ayrıca , tüm yaşam döngüsü metotlarında view ve bir bileşenin metodunda mevcut olan this anahtar kelimeyle erişilebilir.


var Test = {

    oninit: function(vnode) {
        this.data = vnode.attrs.text
    },
    
    view: function(vnode) {
        return m("h3", this.data)
    }
}

m.render(document.body,m(Test, {text: "Hello"}));

// Equivalent HTML
// <h3>Hello</h3>

ES5 fonksiyonları kullanırken this, iç içe geçmiş anonim fonksiyonların değerinin bileşen örneği olmadığını unutmayın.

Classes

Gereksinimlerinize uygunsa (nesne yönelimli projelerde olduğu gibi), bileşenler sınıfları kullanarak da yazılabilir:


class Test {
    constructor(vnode) {
        this.kind = "class component"
    }
    view() {
        return m("div", `Hello from a ${this.kind}`)
    }
    oncreate() {
        console.log(`A ${this.kind} was created`)
    }
}

m.render(document.body, m(Test))



Sınıf bileşenleri , ağacın oluşturmasını sağlamak için view() algılanan bir yöntem tanımlamalıdır. prototype.view

Normal bileşenlerin Aşağıdaki şekilde çalıştırılabilirler.


// EXAMPLE: m.render yöntemi
m.render(document.body, m(Test))

// EXAMPLE: m.mount yöntemi ile
m.mount(document.body, Test)

// EXAMPLE: m.route yöntemi
m.route(document.body, "/", {
    "/": Test
})

// EXAMPLE: component bileşim yöntemi
class AnotherClassComponent {
    view() {
        return m("main", [
            m(Test)
        ])
    }
}

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

9132

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.