Basit Uygulama
Mithril kullanırken karşılaşacağınız temel kavramları gösteren basit bir uygulama oluşturalım.
Sonucun etkileşimli bir demosu burada adresinde görülebilir.
Öncelikle uygulama için bir giriş noktası oluşturalım. index.html adında bir dosya oluşturun:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Uygulamam</title>
</head>
<body>
<script src="bin/app.js"></script>
</body>
</html><!doctype html> satırı, bunun bir HTML5 belgesi olduğunu belirtir. İlk charset meta etiketi, belgenin karakter kodlamasını tanımlar ve viewport meta etiketi, mobil tarayıcıların sayfayı nasıl ölçeklendireceğini belirler. title etiketi, tarayıcı sekmesinde bu uygulama için görüntülenecek metni içerir ve script etiketi, uygulamayı kontrol eden JavaScript dosyasının yolunu belirtir.
Uygulamanın tamamını tek bir JavaScript dosyasında oluşturabiliriz, ancak bu, kod tabanında gezinmeyi zorlaştırır. Bunun yerine, kodu modüllere ayıralım ve bu modülleri bin/app.js paketinde birleştirelim.
Bir paketleyici aracı ayarlamanın birçok yolu vardır, ancak çoğu npm ile dağıtılır. Aslında, Mithril dahil olmak üzere çoğu modern JavaScript kütüphanesi ve aracı bu şekilde dağıtılır. Npm'yi indirmek için Node.js'yi yükleyin; npm otomatik olarak onunla birlikte yüklenir. Node.js ve npm yüklendikten sonra, terminali açın ve şu komutu çalıştırın:
npm init -yNpm doğru yüklendiyse, package.json adında bir dosya oluşturulur. Bu dosya, temel bir proje açıklaması içerir. Bu dosyada proje ve yazar bilgilerini düzenleyebilirsiniz.
Mithril.js'yi yüklemek için kurulum sayfasındaki talimatları takip edin. Mithril.js'nin yüklü olduğu bir proje iskeletine sahip olduğunuzda, uygulamayı oluşturmaya hazırız.
Öncelikle verilerimizi saklamak için bir modül oluşturalım. src/models/User.js adında bir dosya oluşturalım:
// src/models/User.js
var User = {
list: [],
};
module.exports = User;Şimdi bir sunucudan veri yüklemek için kod ekleyelim. Bir sunucuyla iletişim kurmak için Mithril.js'nin XHR (XMLHttpRequest) yardımcı programı olan m.request'i kullanabiliriz. İlk olarak, Mithril.js'yi modüle dahil ediyoruz:
// src/models/User.js
var m = require('mithril');
var User = {
list: [],
};
module.exports = User;Ardından, bir XHR çağrısını tetikleyecek bir fonksiyon oluşturuyoruz. Buna loadList diyelim:
// src/models/User.js
var m = require('mithril');
var User = {
list: [],
loadList: function () {
// TODO: XHR çağrısı yap
},
};
module.exports = User;Sonrasında bir XHR isteği yapmak için m.request çağrısı ekleyelim. Bu eğitim için, hızlı prototipleme amacıyla tasarlanmış REM API'sine (DÜZELTİLMİŞ BAĞLANTI: https://mithril-rem.fly.dev/) XHR çağrıları yapacağız. REM, sahte bir REST API'dir. Bu API, GET https://mithril-rem.fly.dev/api/users uç noktasından bir kullanıcı listesi döndürür. Bir XHR isteği yapmak ve verilerimizi bu uç noktanın yanıtıyla doldurmak için m.request'i kullanalım.
Not: REM uç noktasının çalışması için üçüncü taraf çerezlerinin etkinleştirilmesi gerekebilir.
// src/models/User.js
var m = require('mithril');
var User = {
list: [],
loadList: function () {
return m
.request({
method: 'GET',
url: 'https://mithril-rem.fly.dev/api/users',
withCredentials: true,
})
.then(function (result) {
User.list = result.data;
});
},
};
module.exports = User;method seçeneği bir HTTP metodu'dur. Sunucuda herhangi bir değişiklik yapmadan sunucudan veri almak için GET metodunu kullanmamız gerekir. url, API uç noktasının adresidir. withCredentials: true satırı, çerezleri kullandığımızı gösterir (bu, REM API'si için bir gerekliliktir).
m.request çağrısı, uç noktanın verilerine çözümlenen bir Promise (söz) döndürür. Varsayılan olarak, Mithril.js HTTP yanıt gövdesinin JSON biçiminde olduğunu varsayar ve bunu otomatik olarak bir JavaScript nesnesine veya dizisine dönüştürür. .then geri çağırım (callback) fonksiyonu, XHR isteği tamamlandığında çalışır. Bu durumda, geri çağırım fonksiyonu result.data dizisini User.list'e atar.
Ayrıca loadList içinde bir return ifadesi olduğunu da fark edin. Bu, XHR isteğinin tamamlanmasından sonra çalışacak daha fazla geri çağırım (callback) kaydetmemize olanak tanıyan Promise'lerle çalışırken genel olarak iyi bir uygulamadır.
Bu basit model iki üye sunar: User.list (kullanıcı nesneleri dizisi) ve User.loadList (sunucu verileriyle User.list'i dolduran metot).
Şimdi, Kullanıcı model modülünden verileri görüntülemek için bir görünüm modülü oluşturalım.
src/views/UserList.js adında bir dosya oluşturun. Öncelikle Mithril.js'yi ve modelimizi dahil edelim, çünkü her ikisini de kullanacağız.
// src/views/UserList.js
var m = require('mithril');
var User = require('../models/User');Ardından, bir Mithril.js bileşeni oluşturalım. Bir bileşen, yalnızca bir view metoduna sahip bir nesnedir:
// src/views/UserList.js
var m = require('mithril');
var User = require('../models/User');
module.exports = {
view: function () {
// TODO buraya kod ekle
},
};Mithril.js görünümleri varsayılan olarak hyperscript ile tanımlanır. Hyperscript, karmaşık etiketler için HTML'den daha doğal bir girinti sunan kısa bir sözdizimi sağlar ve yalnızca JavaScript olduğu için JavaScript araç ekosisteminden yararlanmak mümkündür.
Örneğin:
- ES6+'yı IE için ES5'e ve JSX (satır içi HTML benzeri bir sözdizimi uzantısı) uygun hyperscript çağrılarına dönüştürmek için Babel kullanabilirsiniz.
- Kolay linting için ESLint kullanabilirsiniz.
- Kodunuzu kolayca küçültmek için Terser veya UglifyJS (yalnızca ES5) kullanabilirsiniz.
- Kod kapsamı için Istanbul kullanabilirsiniz.
- Kolay kod analizi için TypeScript kullanabilirsiniz.
- Kendi tür tanımlarınızı oluşturmanıza gerek kalmaması için topluluk tarafından desteklenen tür tanımları mevcuttur.
Hyperscript ile başlayalım ve bir öğe listesi oluşturalım.
Hyperscript, Mithril.js'yi kullanmanın standart yoludur; ancak JSX benzer şekilde çalışır.
// src/views/UserList.js
var m = require('mithril');
var User = require('../models/User');
module.exports = {
view: function () {
return m('.user-list');
},
};".user-list" dizesi bir CSS seçicidir ve bekleyeceğiniz gibi .user-list bir sınıfı temsil eder. Bir etiket belirtilmediğinde, varsayılan değer div'dir. Bu nedenle bu görünüm <div class="user-list"></div>'e eşdeğerdir.
Şimdi, veriler arasında dinamik olarak döngü yapmak için daha önce oluşturduğumuz modelden (User.list) kullanıcı listesine başvuralım:
// src/views/UserList.js
var m = require('mithril');
var User = require('../models/User');
module.exports = {
view: function () {
return m(
'.user-list',
User.list.map(function (user) {
return m('.user-list-item', user.firstName + ' ' + user.lastName);
})
);
},
};User.list bir JavaScript dizisi olduğundan ve hyperscript görünümleri yalnızca JavaScript olduğundan, .map metodunu kullanarak dizi içinde döngü yapabiliriz. Bu, her biri bir kullanıcının adını içeren bir div listesini temsil eden bir vnode dizisi oluşturur.
Elbette sorun şu ki, User.loadList fonksiyonunu hiç çağırmadık. Bu nedenle, User.list hala boş bir dizidir ve bu görünüm boş bir sayfa oluşturacaktır. Bu bileşeni oluşturduğumuzda User.loadList'in çağrılmasını istediğimizden, bileşen yaşam döngüsü metotlarından yararlanabiliriz:
// src/views/UserList.js
var m = require('mithril');
var User = require('../models/User');
module.exports = {
oninit: User.loadList,
view: function () {
return m(
'.user-list',
User.list.map(function (user) {
return m('.user-list-item', user.firstName + ' ' + user.lastName);
})
);
},
};Bileşene User.loadList'e başvuran bir oninit metodu eklediğimizi unutmayın. Bu, bileşen başlatıldığında User.loadList'in çağrılacağı ve bir XHR isteğini tetikleyeceği anlamına gelir. Sunucu bir yanıt döndürdüğünde, User.list doldurulur.
Ayrıca oninit: User.loadList() (sonunda parantezlerle) kullanmadığımıza dikkat edin. Aradaki fark, oninit: User.loadList() fonksiyonu bir kez ve hemen çağırırken, oninit: User.loadList yalnızca bileşen oluşturulduğunda bu fonksiyonu çağırır. Bu önemli bir farktır ve JavaScript'e yeni başlayan geliştiriciler için yaygın bir hatadır. Fonksiyonu hemen çağırmak, bileşen hiç oluşturulmasa bile kaynak kodu değerlendirilir değerlendirilmez XHR isteğinin tetiklenmesine neden olur. Ayrıca, bileşen yeniden oluşturulursa (uygulamada ileri geri gezinerek), fonksiyon beklendiği gibi tekrar çağrılmaz.
Önceki giriş noktası dosyası src/index.js'den görünümü oluşturalım:
// src/index.js
var m = require('mithril');
var UserList = require('./views/UserList');
m.mount(document.body, UserList);m.mount çağrısı, belirtilen bileşeni (UserList) bir DOM öğesine (document.body) yerleştirir ve daha önce orada bulunan tüm DOM'u siler. HTML dosyasını bir tarayıcıda açmak artık kişi adlarının bir listesini görüntülemelidir.
Şu anda, herhangi bir stil tanımlamadığımız için liste oldukça sade görünüyor. Bu yüzden birkaç tane ekleyelim. İlk olarak styles.css adında bir dosya oluşturalım ve index.html dosyasına dahil edelim:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Uygulamam</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<script src="bin/app.js"></script>
</body>
</html>Şimdi UserList bileşenini stilize edebiliriz:
.user-list {
list-style: none;
margin: 0 0 10px;
padding: 0;
}
.user-list-item {
background: #fafafa;
border: 1px solid #ddd;
color: #333;
display: block;
margin: 0 0 1px;
padding: 8px 15px;
text-decoration: none;
}
.user-list-item:hover {
text-decoration: underline;
}Tarayıcı penceresini yeniden yüklemek artık stillendirilmiş bazı öğeleri göstermelidir.
Uygulamamıza yönlendirme (routing) ekleyelim.
Yönlendirme, bir ekrana benzersiz bir URL atayarak bir "sayfadan" diğerine geçiş yapma olanağı sağlamak anlamına gelir. Mithril.js, Tek Sayfa Uygulamaları (SPA) için tasarlanmıştır, bu nedenle bu "sayfalar" geleneksel anlamda mutlaka farklı HTML dosyaları değildir. Bunun yerine, Tek Sayfa Uygulamalarında yönlendirme, ömrü boyunca aynı HTML dosyasını korur, ancak uygulamanın durumunu JavaScript aracılığıyla değiştirir. İstemci tarafı yönlendirme, sayfa geçişlerinde boş ekran parlamalarını önleme avantajı sunar. Ayrıca, web hizmeti odaklı bir mimariyle (önceden oluşturulmuş HTML parçaları yerine JSON verisi indiren uygulamalar) kullanıldığında sunucudan gönderilen veri miktarını azaltabilir.
m.mount çağrısını bir m.route çağrısına değiştirerek yönlendirme ekleyebiliriz:
// src/index.js
var m = require('mithril');
var UserList = require('./views/UserList');
m.route(document.body, '/list', {
'/list': UserList,
});m.route çağrısı, uygulamanın document.body'ye yerleştirileceğini belirtir. "/list" argümanı varsayılan yoldur. Bu, kullanıcının geçersiz bir adrese gitmesi halinde bu adrese yönlendirileceği anlamına gelir. {"/list": UserList} nesnesi, mevcut yolların ve her yolun hangi bileşenlere karşılık geldiğinin bir haritasını bildirir.
Tarayıcıda sayfayı yenilemek, yönlendirmenin çalıştığını belirtmek için URL'ye #!/list ekler. Bu yol UserList'i yerleştirdiğinden, ekranda daha önce olduğu gibi kişi listesini görmeye devam etmeliyiz.
#! snippet'i bir hashbang olarak bilinir ve istemci tarafı yönlendirmeyi uygulamak için yaygın olarak kullanılan bir dizedir. Hashbang'in Türkçe karşılığı olmadığı için açıklama yapmak gerekebilir. Bu dizeyi m.route.prefix aracılığıyla yapılandırmak mümkündür. Bazı yapılandırmalar sunucu tarafı değişikliklerini desteklemeyi gerektirir, bu nedenle bu eğitimin geri kalanında hashbang'i kullanmaya devam edeceğiz.
Uygulamamıza kullanıcıları düzenlemek için başka bir yol ekleyelim. İlk olarak views/UserForm.js adında bir modül oluşturalım:
// src/views/UserForm.js
module.exports = {
view: function () {
// TODO görünümü uygula
},
};Daha sonra bu yeni modülü src/index.js'den require edebiliriz:
// src/index.js
var m = require('mithril');
var UserList = require('./views/UserList');
var UserForm = require('./views/UserForm');
m.route(document.body, '/list', {
'/list': UserList,
});Ve son olarak, ona başvuran bir yol oluşturabiliriz:
// src/index.js
var m = require('mithril');
var UserList = require('./views/UserList');
var UserForm = require('./views/UserForm');
m.route(document.body, '/list', {
'/list': UserList,
'/edit/:id': UserForm,
});Yeni yolun içinde bir :id parametresi olduğunu unutmayın. Bu bir yol parametresidir; bunu bir genel karakter (wild card) olarak düşünebilirsiniz; /edit/1 yolu, "1" id'siyle UserForm'a karşılık gelir. /edit/2 de UserForm'a karşılık gelir, ancak "2" id'siyle. Ve böyle devam eder.
UserForm bileşenini bu yol parametrelerine yanıt verebilecek şekilde uygulayalım:
// src/views/UserForm.js
var m = require('mithril');
module.exports = {
view: function () {
return m('form', [
m('label.label', 'Ad'),
m('input.input[type=text][placeholder=Ad]'),
m('label.label', 'Soyad'),
m('input.input[placeholder=Soyad]'),
m('button.button[type=submit]', 'Kaydet'),
]);
},
};Ve styles.css'ye biraz daha stil ekleyelim:
/* styles.css */
body,
.input,
.button {
font: normal 16px Verdana;
margin: 0;
}
.user-list {
list-style: none;
margin: 0 0 10px;
padding: 0;
}
.user-list-item {
background: #fafafa;
border: 1px solid #ddd;
color: #333;
display: block;
margin: 0 0 1px;
padding: 8px 15px;
text-decoration: none;
}
.user-list-item:hover {
text-decoration: underline;
}
.label {
display: block;
margin: 0 0 5px;
}
.input {
border: 1px solid #ddd;
border-radius: 3px;
box-sizing: border-box;
display: block;
margin: 0 0 10px;
padding: 10px 15px;
width: 100%;
}
.button {
background: #eee;
border: 1px solid #ddd;
border-radius: 3px;
color: #333;
display: inline-block;
margin: 0 0 10px;
padding: 10px 15px;
text-decoration: none;
}
.button:hover {
background: #e8e8e8;
}Şu anda, bu bileşen kullanıcı olaylarına yanıt vermek için hiçbir şey yapmıyor. src/models/User.js'deki User modelimize biraz kod ekleyelim. Kod şu anda şöyle:
// src/models/User.js
var m = require('mithril');
var User = {
list: [],
loadList: function () {
return m
.request({
method: 'GET',
url: 'https://mithril-rem.fly.dev/api/users',
withCredentials: true,
})
.then(function (result) {
User.list = result.data;
});
},
};
module.exports = User;Tek bir kullanıcıyı yüklememize izin verecek kod ekleyelim:
// src/models/User.js
var m = require('mithril');
var User = {
list: [],
loadList: function () {
return m
.request({
method: 'GET',
url: 'https://mithril-rem.fly.dev/api/users',
withCredentials: true,
})
.then(function (result) {
User.list = result.data;
});
},
current: {},
load: function (id) {
return m
.request({
method: 'GET',
url: 'https://mithril-rem.fly.dev/api/users/' + id,
withCredentials: true,
})
.then(function (result) {
User.current = result;
});
},
};
module.exports = User;Bir User.current özelliği ve bu özelliği dolduran bir User.load(id) metodu eklediğimizi fark edin. Artık bu yeni metodu kullanarak UserForm görünümünü doldurabiliriz:
// src/views/UserForm.js
var m = require('mithril');
var User = require('../models/User');
module.exports = {
oninit: function (vnode) {
User.load(vnode.attrs.id);
},
view: function () {
return m('form', [
m('label.label', 'Ad'),
m('input.input[type=text][placeholder=Ad]', {
value: User.current.firstName,
}),
m('label.label', 'Soyad'),
m('input.input[placeholder=Soyad]', { value: User.current.lastName }),
m('button.button[type=submit]', 'Kaydet'),
]);
},
};UserList bileşenine benzer biçimde, oninit, User.load()'u çağırır. "/edit/:id": UserForm yolunda :id adında bir yol parametremiz olduğunu hatırlayacağınız üzere, yol parametresi, UserForm bileşeninin vnode nesnesinin bir özelliği olur. Bu nedenle, /edit/1 adresine yönlendirme yapıldığında vnode.attrs.id değeri "1" olacaktır.
Şimdi, UserList görünümünü UserForm'a gidebilmemiz için değiştirelim.
// src/views/UserList.js
var m = require('mithril');
var User = require('../models/User');
module.exports = {
oninit: User.loadList,
view: function () {
return m(
'.user-list',
User.list.map(function (user) {
return m(
m.route.Link,
{
class: 'user-list-item',
href: '/edit/' + user.id,
},
user.firstName + ' ' + user.lastName
);
})
);
},
};Burada .user-list-item vnode'unu bu sınıfa ve aynı alt öğelere sahip bir m.route.Link ile değiştirdik. İstediğimiz yola başvuran bir href ekledik. Bunun anlamı, bağlantıya tıklandığında URL'nin hashbang #! işaretinden sonraki bölümünün değişeceği anlamına gelir. Böylece mevcut HTML sayfası yeniden yüklenmeden adres değiştirilir. Temelde, bağlantıyı oluşturmak için bir <a> etiketi kullanılır ve işlem sorunsuz bir şekilde tamamlanır.
Tarayıcıda sayfayı yeniden yüklerseniz, artık bir kişiyi tıklayıp forma yönlendirilmelisiniz. Ayrıca, formdan kişi listesine geri dönmek için tarayıcıdaki geri düğmesine basmalısınız.
Formun kendisi "Kaydet"e bastığınızda henüz bir şey kaydetmiyor. Bu formu işlevsel hale getirelim:
// src/views/UserForm.js
var m = require('mithril');
var User = require('../models/User');
module.exports = {
oninit: function (vnode) {
User.load(vnode.attrs.id);
},
view: function () {
return m(
'form',
{
onsubmit: function (e) {
e.preventDefault();
User.save();
},
},
[
m('label.label', 'İsim'),
m('input.input[type=text][placeholder=İsim]', {
oninput: function (e) {
User.current.firstName = e.target.value;
},
value: User.current.firstName,
}),
m('label.label', 'Soyadı'),
m('input.input[placeholder=Soyadı]', {
oninput: function (e) {
User.current.lastName = e.target.value;
},
value: User.current.lastName,
}),
m('button.button[type=submit]', 'Kaydet'),
]
);
},
};Kullanıcı metin alanlarına veri girdikçe, User.current.firstName ve User.current.lastName özelliklerini güncelleyen oninput olaylarını ekledik.
Ayrıca, "Kaydet" düğmesine tıklandığında User.save metodunun çağrılmasını sağladık. Şimdi bu metodu uygulayalım:
// src/models/User.js
var m = require('mithril');
var User = {
list: [],
loadList: function () {
return m
.request({
method: 'GET',
url: 'https://mithril-rem.fly.dev/api/users',
withCredentials: true,
})
.then(function (result) {
User.list = result.data;
});
},
current: {},
load: function (id) {
return m
.request({
method: 'GET',
url: 'https://mithril-rem.fly.dev/api/users/' + id,
withCredentials: true,
})
.then(function (result) {
User.current = result;
});
},
save: function () {
return m.request({
method: 'PUT',
url: 'https://mithril-rem.fly.dev/api/users/' + User.current.id,
body: User.current,
withCredentials: true,
});
},
};
module.exports = User;Yukarıdaki save metodunda, sunucuya veri güncellediğimizi belirtmek için PUT HTTP metodunu kullandık.
Şimdi uygulamada bir kullanıcının adını düzenlemeyi deneyin. Bir değişikliği kaydettikten sonra, değişikliğin kullanıcı listesinde yansıdığını görmelisiniz.
Şu anda kullanıcı listesine yalnızca tarayıcının geri tuşuyla dönebiliyoruz. İdeal olarak, genel kullanıcı arayüzü öğelerini yerleştirebileceğimiz bir menüye veya daha genel bir düzene ihtiyacımız var.
Bir src/views/Layout.js dosyası oluşturalım:
// src/views/Layout.js
var m = require('mithril');
module.exports = {
view: function (vnode) {
return m('main.layout', [
m('nav.menu', [m(m.route.Link, { href: '/list' }, 'Kullanıcılar')]),
m('section', vnode.children),
]);
},
};Bu bileşen oldukça basit; kullanıcı listesine giden bir bağlantı içeren bir <nav> barındırıyor. /edit bağlantılarında yaptığımıza benzer şekilde, bu bağlantı yönlendirilebilir bir bağlantı oluşturmak için m.route.Link kullanıyor.
Ek olarak, alt öğe olarak vnode.children içeren bir <section> öğesi de mevcut. vnode, Layout bileşeninin bir örneğini temsil eden sanal düğüme (vnode) referans verir (yani, bir m(Layout) çağrısı tarafından döndürülen sanal düğüm). Bu nedenle vnode.children, bu sanal düğümün tüm alt öğelerini ifade eder.
Ve stilleri bir kez daha güncelleyelim:
/* styles.css */
body,
.input,
.button {
font: normal 16px Verdana;
margin: 0;
}
.layout {
margin: 10px auto;
max-width: 1000px;
}
.menu {
margin: 0 0 30px;
}
.user-list {
list-style: none;
margin: 0 0 10px;
padding: 0;
}
.user-list-item {
background: #fafafa;
border: 1px solid #ddd;
color: #333;
display: block;
margin: 0 0 1px;
padding: 8px 15px;
text-decoration: none;
}
.user-list-item:hover {
text-decoration: underline;
}
.label {
display: block;
margin: 0 0 5px;
}
.input {
border: 1px solid #ddd;
border-radius: 3px;
box-sizing: border-box;
display: block;
margin: 0 0 10px;
padding: 10px 15px;
width: 100%;
}
.button {
background: #eee;
border: 1px solid #ddd;
border-radius: 3px;
color: #333;
display: inline-block;
margin: 0 0 10px;
padding: 10px 15px;
text-decoration: none;
}
.button:hover {
background: #e8e8e8;
}Düzenimizi uygulamaya dahil etmek için src/index.js içindeki yönlendiriciyi değiştirelim:
// src/index.js
var m = require('mithril');
var UserList = require('./views/UserList');
var UserForm = require('./views/UserForm');
var Layout = require('./views/Layout');
m.route(document.body, '/list', {
'/list': {
render: function () {
return m(Layout, m(UserList));
},
},
'/edit/:id': {
render: function (vnode) {
return m(Layout, m(UserForm, vnode.attrs));
},
},
});Her bileşeni bir RouteResolver nesnesiyle değiştirdik (bu, temelde bir render metoduna sahip bir nesnedir). render yöntemleri, m() çağrılarını iç içe yerleştirerek normal bileşen görünümleriyle aynı şekilde yazılabilir.
Burada dikkat çekici olan, bileşenlerin m() çağrısında bir seçici dizesi yerine nasıl kullanılabileceğidir. Bu, Layout bileşeninin bir örneğini temsil eden ve tek alt öğesi UserList sanal düğümü olan bir kök sanal düğüm olduğu anlamına gelir.
/edit/:id rotasında, UserForm bileşenine rota parametrelerini ileten bir vnode argümanı da vardır. Yani URL /edit/1 ise, bu durumda vnode.attrs {id: 1}'dir ve bu m(UserForm, vnode.attrs) ifadesi m(UserForm, {id: 1}) ile eşdeğerdir. Eşdeğer JSX kodu <UserForm id={vnode.attrs.id} /> olacaktır.
Tarayıcıdaki sayfayı yenileyin ve artık uygulamadaki her sayfada genel navigasyonu göreceksiniz.
Bu öğretici burada sona eriyor.
Bu öğreticide, bir sunucudan kullanıcıları listeleyebileceğimiz ve bunları ayrı ayrı düzenleyebileceğimiz çok basit bir uygulama oluşturma sürecinden geçtik. Ek alıştırma olarak, kullanıcı oluşturma ve silme işlevlerini kendiniz uygulamayı deneyin.
Mithril.js kodunun daha fazla örneğini görmek istiyorsanız, örnekler sayfasına bakın. Sorularınız varsa, Mithril.js sohbet odasına uğramaktan çekinmeyin.