Mithril.js DOM Elemanları Ekleme

Daha önceki konumuzda Mithril.js ile ekrana "Hello World" yazdırmıştık. Pekela HTML öğeleri ekrana yazdıracağımız zaman m() kod yardımı ile ekrana HTML öğeleri yazdırırız.

Aşağıda ki ifade Mithril görünümünde bir HTML öğesini temsil eder.


m("div.foo", {style: {color: "red"}}, "hello")

// renders to this HTML:

// hello

HTML ÇIKTI:


<div class="foo" style="color: red">hello</div>

Sözdizimi:

vnode = m(selector, attrs, children)

selector: Gereklidir. Bir CSS seçici veya bir bileşen

attrs: İstağe bağlı. HTML nitelikleri veya öğe özellikleri

children: İsteğe bağlı. Metin

Nasıl çalışır

Mithril, m() Methodu JavaScript sözdizimini kullanarak herhangi bir HTML yapısını ifade etmeyi sağlayan bir hiperscript işlevi sağlar. Bir selector dize (gerekli), bir attrs nesne (isteğe bağlı) ve bir children dizi (isteğe bağlı) kabul eder.


m("div", {id: "box"}, "hello")

// renders to this HTML:
// <div id="box">hello</div>

m() methodu aslında bir DOM öğesi döndürmez. Bunun yerine , oluşturulacak DOM öğesini temsil eden bir JavaScript nesnesi olan sanal bir DOM düğümü veya vnode döndürür.


// a vnode
var vnode = {tag: "div", attrs: {id: "box"}, children: [ /*...*/ ]}

Bir vnode'u gerçek bir DOM öğesine dönüştürmek için m.render() fonksiyonu kullanın:


m.render(document.body, m("br")) // puts a <br> in <body>

m.render() fonksiyonu birden çok kez çağırmak, DOM ağacını her seferinde sıfırdan oluşturmaz. Bunun yerine, her çağrı yalnızca çağrıya geçen sanal DOM ağacını yansıtmak için mutlaka gerekliyse, bir DOM ağacında değişiklik yapar. Bu davranış arzu edilir; Çünkü DOM'u sıfırdan yeniden oluşturmak çok pahalıdır ve diğer şeylerin yanı sıra girdi odağı kaybı gibi sorunlara neden olur. Buna karşılık, DOM’u yalnızca gerektiğinde güncellemek nispeten daha hızlıdır ve birden fazla kullanıcı hikayesini işleyen karmaşık kullanıcı arayüzlerini korumayı kolaylaştırır.

ÖRNEK: Metnimizi bir <h1>etikete yazalım.

kodlarımızı script etiketi içine yazacaksak DOM hazır olması için aşağıdaki kodu yazın.


document.addEventListener("DOMContentLoaded", function() {

   alert('Döküman hazır!');

});

Kod karmaşasası olmaması için jfiddle document.ready otomatike alacağım.


var root = document.body;

m.render(root, m("h1", "İlk uygulamamız."))

ÇIKTI:

m() Methodu istediğiniz herhangi HTML yapısını tanımlamak için kullanılabilir. Öyleyse, <h1> elemanımıza bir sınıf eklemeniz gerekirse:


m("h1", {class: "title"}, "Deneme")

//ÇIKTI: <h1 class="title">Deneme</h1>

ÇIKTI:

Yukarıdaki örneği çalıştırıp browserın F12 tuşuna basın Elements bölümünden class eklendimi kontrol yapabilirsiniz.

Birden fazla elemana sahip olmak istiyorsanız:


[
    m("h1", {class: "title"}, "Deneme javascript"),
    m("button", "A button"),
]

//ÇIKTI: <h1 class="title">Deneme javascript</h1>

//  <button>A button</button>

ÇIKTI:

Ve bunun gibi:


m("main", [
    m("h1", {class: "title"}, "Deneme javascript"),
    m("button", "A button"),
])

ÇIKTI:

Esneklik

m() Methodu hem polimorfik hem de değişkendir. Başka bir deyişle, girdi parametreleri olarak beklediği gibi oldukça esnektir:


// simple tag
m("div") // <div></div>

// attributes and children are optional
m("a", {id: "b"}) // <a id="b"></a>
m("span", "hello") // <span>hello</span>

// tag with child nodes
m("ul", [             // <ul>
    m("li", "hello"), //   <li>hello</li>
    m("li", "world"), //   <li>world</li>
])                    // </ul>

// array is optional
m("ul",               // <ul>
    m("li", "hello"), //   <li>hello</li>
    m("li", "world")  //   <li>world</li>
)                     // </ul>

CSS seçicileri

İlk argüman, m() Methodunda bir HTML öğesini tanımlayabilen herhangi bir CSS seçicisi olabilir. #(İd), .(class) ve [ ](öznitelik) sözdiziminin geçerli bir CSS bileşimini kabul eder .


m("div#hello")
// <div id="hello"></div>

m("section.container")
// <section class="container"></section>

m("input[type=text][placeholder=Name]")
// <input type="text" placeholder="Name" />

m("a#exit.external[href='https://example.com']", "Leave")
// <a id="exit" class="external" href="https://example.com">Leave</a>

Etiket adını atlarsanız, Mithril bir div etiket varsayar.


m(".box.box-bordered") // <div class="box box-bordered"></div>

Style özelliği

Mithril hem dizeleri hem de nesneleri geçerli style değerler olarak destekler. Başka bir deyişle, aşağıdakilerin tümü desteklenir:


m("div", {style: "background:red;"})
m("div", {style: {background: "red"}})
m("div[style=background:red]")

Style olarak bir dize kullanmak, yeniden çizildiyse öğedeki tüm satır içi stillerin üzerine yazacaktır; yalnızca değerleri değişen CSS kurallarının üzerine yazmaz.

Hecelenmiş CSS özellik adlarını (gibi background-color) ve camelCase DOM style özellik adlarını (gibi backgroundColor) kullanabilirsiniz. Tarayıcınız destekliyorsa, CSS özel, özelliklerini de tanımlayabilirsiniz .

Mithril, sayı değerlerine birimler eklemeye çalışmaz. Bu sadece onları sıralar.

Events (Etkinlikler)

Mithril, özellikler ekliyebilirsiniz(atribute) $ {event} özelliğini tanımlamayan olaylar da dahil olmak üzere, tüm DOM etkinlikleri için etkinlik işleyici bağlamasını destekliyor.


var root = document.body;

function doSomething(e) {

   alert(e)

  }

m.render(root, m("div", {onclick: doSomething}, "Deneme"))

Mithril, işlevleri ve EventListener nesnelerini kabul eder. Yani bu örnekte çalışacak:


var root= document.body;

 var clickListener = {
    handleEvent: function(e) {
        alert(e)
    }
}

m.render(root,m("div", {onclick: clickListener},"Deneme"))

m() Mehtodunda atribute olarak onclik belirttikten sonra fonksiyon yazılabilir.


 m("button", {onclick: function() {alert("merhaba")}},"Tıkla"),

Bileşenler

Bileşenler , mantığı bir birime yerleştirmenize ve onu bir elementmiş gibi kullanmanıza izin verir. Büyük, ölçeklenebilir uygulamalar yapmak için temel oluştururlar.

Bileşen, bir view yöntem içeren herhangi bir JavaScript nesnesidir. Bir bileşeni kullanmak için, m() Methoduna CSS seçici eklemek yerine, bileşeni ilk argüman olarak girin. Aşağıdaki örnekte gösterildiği gibi özellikleri ve çocukları tanımlayarak argümanları bileşene iletebilirsiniz.


var root = document.body;
   // define a component
var Greeter = {
    view: function(vnode) {
        return m("h1", vnode.attrs, ["Hello ", vnode.children])
    }
}

// consume it
m.render(root,m(Greeter, {style: "color:blue;"}, "world"))

// renders to this HTML:
// <h1 style="color:blue;">Hello world</h1>

Keys(Anahtarlar)

Listedeki Vnodes, vnode key listesini değiştiren model verileri olarak DOM öğesinin kimliğini yönetmek için kullanılabilen özel bir özniteliğe sahip olabilir.

Genellikle, key veri dizisindeki nesnelerin benzersiz tanımlayıcı alanı olmalıdır.


var people = [
    {id: 1, name: "Ahmet"},
    {id: 2, name: "Mehmet"},
]

function userList(users) {
    return users.map(function(u) {
        return m("button", u.name) // <button>Ahmet</button>
                                   // <button>Mehmet</button>
    })
}

m.render(document.body, userList(people))

Bir butona sahip olmak, users dizi karıştırılır ve görünüm yeniden işlenirse, doğru odaklanma ve DOM durumunu korumak için girişlerin aynı sırada karıştırılacağı anlamına gelir.

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

KATEGORİ

HTML
CSS
PHP
JQUERY
PHOTOSHOP
JavaScript
Web Dünyası
Linux
MİTHRİL FRAMEWORK
Laravel
Git
React

POPÜLER MAKALE

HTML LİNK(Bağlantı)EKLEME - LİNK VERME
HTML YAZI VE RESİM ORTALAMA
HTML RESME LİNK VERME
HTML FORM OLUŞTURMA
CSS YATAY MENÜ YAPIMI
HTML RESİM EKLEME
CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
HTML DİV ve SPAN NEDİR?
HTML ARKAPLANA MÜZİK EKLEME
KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME

ETİKET