Egyszerű példa
Készítsünk egy egyszerű alkalmazást, amely bemutatja, hogyan végezhetjük el a Mithril használata során szükséges legfontosabb feladatokat.
A végeredmény interaktív példája itt
Először hozzunk létre egy belépési pontot az alkalmazás számára. Hozzon létre egy index.html fájlt:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Az én alkalmazásom</title>
</head>
<body>
<script src="bin/app.js"></script>
</body>
</html>A <!doctype html> sor HTML5 dokumentumot jelöl. Az első charset meta tag a dokumentum kódolását jelzi, a viewport meta tag pedig azt határozza meg, hogy a mobil böngészők hogyan méretezzék az oldalt. A title tag a böngészőfülön megjelenő szöveget tartalmazza, míg a script tag megadja az alkalmazást vezérlő JavaScript fájl elérési útját.
Létrehozhatnánk a teljes alkalmazást egyetlen JavaScript fájlban is, de ez később megnehezítené a kód navigálását. Ehelyett bontsuk a kódot modulokra, és állítsuk össze ezeket a modulokat egy csomagba: bin/app.js.
Számos módja van a csomagolóeszköz beállításának, de a legtöbbet npm-en keresztül terjesztik. Valójában a legtöbb modern JavaScript könyvtárat és eszközt így terjesztik, beleértve a Mithrilt is. Az npm letöltéséhez telepítse a Node.js-t; az npm automatikusan települ vele. Miután telepítette a Node.js-t és az npm-et, nyissa meg a parancssort, és futtassa ezt a parancsot:
npm init -yHa az npm megfelelően van telepítve, létrejön egy package.json fájl. Ez a fájl tartalmaz egy vázprojekt meta-leíró fájlt. Ebben a fájlban nyugodtan szerkesztheti a projekt és a szerzői információkat.
A Mithril.js telepítéséhez kövesse a telepítési oldalon található utasításokat. Miután rendelkezik egy projektvázzal, amelyen a Mithril.js telepítve van, készen állunk az alkalmazás létrehozására.
Kezdjük azzal, hogy létrehozunk egy modult az állapotunk tárolására. Hozzunk létre egy src/models/User.js nevű fájlt.
// src/models/User.js
var User = {
list: [],
};
module.exports = User;Most adjunk hozzá kódot, amellyel adatokat tölthetünk be egy szerverről. A szerverrel való kommunikációhoz használhatjuk a Mithril.js m.request XHR segédeszközét. Először is foglaljuk bele a Mithril.js-t a modulba:
// src/models/User.js
var m = require('mithril');
var User = {
list: [],
};
module.exports = User;Ezután hozzunk létre egy függvényt, amely egy XHR hívást indít el. Nevezzük loadList-nek.
// src/models/User.js
var m = require('mithril');
var User = {
list: [],
loadList: function () {
// TODO: make XHR call - TODO: XHR hívás
},
};
module.exports = User;Ezután hozzáadhatunk egy m.request hívást az XHR kéréshez. Ebben az oktatóanyagban a REM (DEAD LINK, FIXME: https //rem-rest-api.herokuapp.com/) API-t fogjuk használni XHR hívásokhoz, amely egy gyors prototípus-készítésre tervezett mock REST API. Ez az API a felhasználók listáját adja vissza a GET https://mithril-rem.fly.dev/api/users végponton keresztül. Használjuk az m.request-et egy XHR kéréshez, és töltsük fel adatainkat a végpont válaszával.
Megjegyzés: a REM végpont működéséhez engedélyezni kell a harmadik féltől származó cookie-kat.
// 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;A method opció egy HTTP metódust jelöl. Ahhoz, hogy adatokat kérjünk le a szerverről anélkül, hogy mellékhatásokat okoznánk a szerveren, a GET metódust kell használnunk. Az url az API végpont címe. A withCredentials: true sor azt jelzi, hogy cookie-kat használunk, ami a REM API követelménye.
Az m.request hívás egy Promise-t ad vissza, amely a végpont adataival teljesül. Alapértelmezés szerint a Mithril.js feltételezi, hogy a HTTP válasz törzse JSON formátumú, és automatikusan JavaScript objektummá vagy tömbbé alakítja. A .then callback akkor fut le, amikor az XHR kérés befejeződik. Ebben az esetben a callback a result.data tömböt a User.list-hez rendeli.
Figyelje meg, hogy a loadList-ben is van egy return utasításunk. Ez egy általános jó gyakorlat a Promise-okkal való munkavégzés során, mert lehetővé teszi, hogy további callback függvényeket regisztráljunk, amelyek az XHR kérés befejezése után futnak le.
Ez az egyszerű modell két tagot tesz elérhetővé: User.list (felhasználói objektumok tömbje) és User.loadList (metódus, amely szerveradatokkal tölti fel a User.list-et).
Most hozzunk létre egy nézetmodult, amellyel megjeleníthetjük az adatokat a User modell modulunkból.
Hozzon létre egy src/views/UserList.js nevű fájlt. Először is foglaljuk bele a Mithril.js-t és a modellünket, mivel mindkettőt használnunk kell:
// src/views/UserList.js
var m = require('mithril');
var User = require('../models/User');Ezután hozzunk létre egy Mithril.js komponenst. A komponens egyszerűen egy objektum, amelynek van egy view metódusa:
// src/views/UserList.js
var m = require('mithril');
var User = require('../models/User');
module.exports = {
view: function () {
// TODO add code here - TODO: Kód ide
},
};Alapértelmezés szerint a Mithril.js nézetek a hyperscript használatával kerülnek leírásra. A Hyperscript egy tömör szintaxist kínál, amely a komplex tagekhez természetesebben behúzható, mint a HTML. Mivel a szintaxisa JavaScript, a JavaScript eszközök ökoszisztémájának nagy része kihasználható. Például:
- Használhatja a Babel alkalmazást az ES6+ ES5-re történő transzpilálására az IE számára, valamint a JSX (egy beágyazott HTML-szerű szintaxis kiterjesztés) megfelelő hyperscript hívásokká alakítására.
- Használhatja az ESLint alkalmazást az egyszerű lintinghez speciális bővítmények nélkül.
- Használhatja a Terser vagy az UglifyJS (csak ES5) alkalmazást a kód egyszerű minimalizálására.
- Használhatja az Istanbul alkalmazást a kódlefedettséghez.
- Használhatja a TypeScript alkalmazást az egyszerű kódelemzéshez. (Vannak közösség által támogatott típusdefiníciók, így nem kell sajátot készítenie.)
Kezdjük a hyperscripttel, és hozzunk létre egy elemlistát. A Hyperscript a Mithril.js használatának idiómatikus módja, de a JSX is nagyon hasonlóan működik.
// src/views/UserList.js
var m = require('mithril');
var User = require('../models/User');
module.exports = {
view: function () {
return m('.user-list');
},
};A ".user-list" string egy CSS szelector, és ahogy az várható, a .user-list egy osztályt képvisel. Ha nincs megadva tag, akkor a div az alapértelmezett. Ez a nézet tehát egyenértékű a <div class="user-list"></div> kóddal.
Most hivatkozzunk a korábban létrehozott modell (User.list) felhasználólistájára, hogy dinamikusan iteráljunk az adatokon:
// 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);
})
);
},
};Mivel a User.list egy JavaScript tömb, és a hyperscript nézetek JavaScript kódok, a .map metódussal iterálhatunk a tömb elemein. Ez egy vnode tömböt hoz létre, amely div elemek listáját képviseli, amelyek mindegyike egy felhasználó nevét tartalmazza.
A probléma az, hogy soha nem hívtuk meg a User.loadList függvényt. Ezért a User.list továbbra is egy üres tömb, így ez a nézet egy üres oldalt jelenítene meg. Mivel azt szeretnénk, hogy a User.loadList meghívásra kerüljön, amikor rendereljük ezt a komponenst, kihasználhatjuk a komponens életciklus metódusait:
// 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);
})
);
},
};Figyelje meg, hogy hozzáadtunk egy oninit metódust a komponenshez, amely a User.loadList-re hivatkozik. Ez azt jelenti, hogy amikor a komponens inicializálódik, a User.loadList meghívásra kerül, ami XHR kérést indít el. Amikor a szerver választ ad, a User.list feltöltésre kerül.
Azt is vegye figyelembe, hogy nem csináltuk oninit: User.loadList() (zárójellel a végén). A különbség az, hogy az oninit: User.loadList() egyszer és azonnal meghívja a függvényt, de az oninit: User.loadList csak akkor hívja meg a függvényt, amikor a komponens renderel. Ez egy fontos különbség, és egy gyakori buktató a JavaScriptben kezdő fejlesztők számára: a függvény azonnali meghívása azt eredményezi, hogy az XHR kérés azonnal elindul, amint a forráskód kiértékelésre kerül, még akkor is, ha a komponens soha nem renderelődik. Továbbá, ha a komponenst valaha is újra létrehozzák (az alkalmazásban való oda-vissza navigálás révén), a függvény nem fog újra meghívásra kerülni a várt módon.
Rendereljük a nézetet a korábban létrehozott src/index.js belépési pont fájlból:
// src/index.js
var m = require('mithril');
var UserList = require('./views/UserList');
m.mount(document.body, UserList);Az m.mount hívás a megadott komponenst (UserList) rendereli egy DOM elembe (document.body), törölve az ott korábban lévő DOM-ot. A HTML fájl böngészőben történő megnyitásakor most a személynevek listájának kell megjelennie.
Jelenleg a lista meglehetősen egyszerűnek tűnik, mert nem definiáltunk stílusokat. Tehát adjunk hozzá néhányat. Először hozzunk létre egy styles.css nevű fájlt, és foglaljuk bele az index.html fájlba:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Az én alkalmazásom</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<script src="bin/app.js"></script>
</body>
</html>Most stílusozhatjuk a UserList komponenst:
.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;
}A böngészőablak újratöltésekor most néhány stílusozott elemnek kell megjelennie.
Adjuk hozzá az útválasztást az alkalmazásunkhoz.
Az útválasztás azt jelenti, hogy egy képernyőt egyedi URL-hez kötünk, hogy létrehozzuk a képességet az egyik "oldalról" a másikra való átlépésre. A Mithril.js egyoldalas alkalmazásokhoz (Single Page Applications) készült, így ezek az "oldalak" nem feltétlenül különböző HTML fájlok a szó hagyományos értelmében. Ehelyett az egyoldalas alkalmazásokban az útválasztás ugyanazt a HTML fájlt tartja meg élettartama során, de JavaScripten keresztül megváltoztatja az alkalmazás állapotát. Az ügyféloldali útválasztás előnye, hogy elkerüli az üres képernyő villanásait az oldalátmenetek között, és csökkentheti a szerverről leküldött adatok mennyiségét, ha webszolgáltatás-orientált architektúrával együtt használják (azaz egy olyan alkalmazás, amely JSON formátumban tölti le az adatokat ahelyett, hogy előre renderelt, bőbeszédű HTML darabokat töltene le).
Útválasztást úgy adhatunk hozzá, hogy az m.mount hívást m.route hívásra cseréljük:
// src/index.js
var m = require('mithril');
var UserList = require('./views/UserList');
m.route(document.body, '/list', {
'/list': UserList,
});Az m.route hívás meghatározza, hogy az alkalmazás a document.body-ba kerül renderelésre. A "/list" argumentum az alapértelmezett útvonal. Ez azt jelenti, hogy a felhasználó erre az útvonalra lesz átirányítva, ha egy nem létező útvonalra érkezik. A {"/list": UserList} objektum a meglévő útvonalak térképét deklarálja, és azt, hogy mely komponensekre oldódik fel az egyes útvonalak.
Az oldal böngészőben történő frissítésekor most a #!/list karakterláncnak kell megjelennie az URL-ben, jelezve, hogy az útválasztás működik. Mivel ez az útvonal a UserList-et rendereli, továbbra is látnunk kell a képernyőn az emberek listáját, mint korábban.
A #! kódrészlet hashbang néven ismert, és ez egy általánosan használt string az ügyféloldali útválasztás megvalósításához. Ezt a stringet a m.route.prefix segítségével lehet konfigurálni. Egyes konfigurációk szerveroldali módosításokat igényelnek, ezért a bemutató hátralévő részében továbbra is a hashbangot fogjuk használni.
Adjuk hozzá egy másik útvonalat az alkalmazásunkhoz a felhasználók módosításához. Először hozzunk létre egy views/UserForm.js nevű modult.
// src/views/UserForm.js
module.exports = {
view: function () {
// TODO: nézet implementálása
},
};Ezután require-álhatjuk ezt az új modult a src/index.js-ből.
// src/index.js
var m = require('mithril');
var UserList = require('./views/UserList');
var UserForm = require('./views/UserForm');
m.route(document.body, '/list', {
'/list': UserList,
});Végül létrehozhatunk egy útvonalat, amely erre hivatkozik:
// 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,
});Figyelje meg, hogy az új útvonalban van egy :id. Ez egy útvonalparaméter; úgy gondolhat rá, mint egy helyettesítő karakterre. A /edit/1 útvonal a UserForm komponensre mutatna, ahol az id értéke "1". A /edit/2 szintén a UserForm-ra oldódna fel, de "2" id-vel. És így tovább.
Implementáljuk a UserForm komponenst, hogy reagálhasson ezekre az útvonalparaméterekre:
// src/views/UserForm.js
var m = require('mithril');
module.exports = {
view: function () {
return m('form', [
m('label.label', 'Keresztnév'),
m('input.input[type=text][placeholder=Keresztnév]'),
m('label.label', 'Vezetéknév'),
m('input.input[placeholder=Vezetéknév]'),
m('button.button[type=submit]', 'Mentés'),
]);
},
};És adjunk hozzá néhány további stílust a styles.css fájlhoz:
/* 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;
}Jelenleg ez a komponens semmit sem tesz a felhasználói eseményekre való reagáláshoz. Adjuk hozzá a User modellünkhöz a src/models/User.js fájlban. Jelenleg így néz ki a kód:
// 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;Adjuk hozzá a kódot, hogy betölthessünk egyetlen felhasználót:
// 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;Figyelje meg, hogy hozzáadtunk egy User.current tulajdonságot és egy User.load(id) metódust, amely feltölti ezt a tulajdonságot. Most feltölthetjük a UserForm nézetet ezzel az új metódussal:
// 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', 'Keresztnév'),
m('input.input[type=text][placeholder=Keresztnév]', {
value: User.current.firstName,
}),
m('label.label', 'Vezetéknév'),
m('input.input[placeholder=Vezetéknév]', { value: User.current.lastName }),
m('button.button[type=submit]', 'Mentés'),
]);
},
};A UserList komponenshez hasonlóan az oninit metódus meghívja a User.load() függvényt. Emlékezzünk vissza, hogy volt egy :id nevű útvonalparaméterünk a "/edit/:id": UserForm útvonalon? Az útvonalparaméter a UserForm komponens vnode-jának attribútumává válik, így a /edit/1-re való útválasztás a vnode.attrs.id értékét "1"-re állítaná.
Most módosítsuk a UserList nézetet, hogy onnan navigálhassunk egy UserForm-ra:
// 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
);
})
);
},
};Itt kicseréltük a .user-list-item vnode-ot egy m.route.Link-re ezzel az osztállyal és ugyanazokkal a gyermekekkel. Hozzáadtunk egy href-et, amely a kívánt útvonalra hivatkozik. Ez azt jelenti, hogy a linkre kattintva megváltozna az URL hashbang #! utáni része (így megváltoztatva az útvonalat az aktuális HTML oldal eltávolítása nélkül). A színfalak mögött egy <a> tagot használ a link megvalósításához, és minden csak működik.
Ha frissíti az oldalt a böngészőben, most már rákattinthat egy személyre, és egy űrlapra juthat.
Az űrlap a "Mentés" gombra kattintva még mindig nem menti el az adatokat. Tegyük működőképessé az űrlapot:
// 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', 'Keresztnév'),
m('input.input[type=text][placeholder=Keresztnév]', {
oninput: function (e) {
User.current.firstName = e.target.value;
},
value: User.current.firstName,
}),
m('label.label', 'Vezetéknév'),
m('input.input[placeholder=Vezetéknév]', {
oninput: function (e) {
User.current.lastName = e.target.value;
},
value: User.current.lastName,
}),
m('button.button[type=submit]', 'Mentés'),
]
);
},
};Hozzáadtunk oninput eseménykezelőket mindkét beviteli mezőhöz. Ezek beállítják a User.current.firstName és User.current.lastName tulajdonságokat, amikor a felhasználó gépel.
Ezenkívül beállítottuk, hogy a "Mentés" gomb megnyomásakor a User.save metódus hívódjon meg. Valósítsuk meg ezt a metódust:
// 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;A save metódusban a PUT HTTP metódust használjuk annak jelzésére, hogy adatokat frissítünk a szerveren.
Most próbálja meg szerkeszteni egy felhasználó nevét az alkalmazásban. Miután elmentett egy változtatást, a változásnak meg kell jelennie a felhasználók listájában.
Jelenleg csak a böngésző visszagombjával tudunk visszatérni a felhasználói listához. Ideális esetben szeretnénk egy menüt – vagy általánosabban egy elrendezést, ahová globális felhasználói felületi elemeket helyezhetünk el.
Hozzuk létre a src/views/Layout.js fájlt:
// 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' }, 'Felhasználók')]),
m('section', vnode.children),
]);
},
};Ez a komponens meglehetősen egyszerű: tartalmaz egy <nav> elemet, amely egy felhasználói listára mutató hivatkozást tartalmaz. Ahogy az /edit hivatkozásoknál is tettük, ez a hivatkozás az m.route.Link -et használja egy útvonalválasztó hivatkozás létrehozásához.
Figyeljük meg, hogy van egy <section> elem is, melynek gyermeke a vnode.children. A vnode a Layout komponens egy példányát képviselő virtuális DOM csomópontra mutat (azaz a m(Layout) hívás eredményére). Ezért a vnode.children az adott virtuális DOM csomópont összes gyermekére utal.
És frissítsük a stílusokat:
/* 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;
}Módosítsuk a routert a src/index.js fájlban, hogy hozzáadjuk az elrendezésünket:
// 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));
},
},
});Minden komponenst lecseréltünk egy RouteResolver objektumra (ami alapvetően egy render metódussal rendelkező objektum). A render metódusok ugyanúgy írhatók, mint a szokásos komponens nézetek, a m() hívások egymásba ágyazásával.
Érdemes megfigyelni, hogy a komponensek hogyan használhatók egy választó (selector) string helyett a m() hívásban. Itt, a /list útvonalon a következőt látjuk: m(Layout, m(UserList)). Ez azt jelenti, hogy van egy gyökér virtuális DOM csomópont, ami a Layout egy példánya, és aminek egyetlen gyermeke a UserList virtuális DOM csomópont.
Az /edit/:id útvonalon egy vnode argumentum is található, ami az útvonalparamétereket adja át a UserForm komponensnek. Tehát, ha az URL /edit/1, akkor a vnode.attrs értéke {id: 1}, és a m(UserForm, vnode.attrs) kifejezés egyenértékű a m(UserForm, {id: 1}) kifejezéssel. Az egyenértékű JSX kód <UserForm id={vnode.attrs.id} /> lenne.
Frissítse az oldalt a böngészőben, és most látni fogja a globális navigációt az alkalmazás minden oldalán.
Ezzel befejeződött az oktatóanyag.
Ebben az oktatóanyagban végigmentünk egy nagyon egyszerű alkalmazás létrehozásának folyamatán, ahol felhasználókat listázhatunk egy szerverről, és egyenként szerkeszthetjük őket. Gyakorlásképpen próbálja meg önállóan megvalósítani a felhasználók létrehozását és törlését.
Ha több példát szeretne látni a Mithril.js kódra, nézze meg a példák oldalt. Ha kérdése van, nyugodtan látogasson el a Mithril.js chat szobájába.