<!DOCTYPE html>
<html>
<head>
<title>Mithril Example</title>
</head>
<body>
<p>I'm outside the root!</p>
<div id="root"></div>
</body>
</html>var root = document.getElementById('root');
var newTodo = '';
var todos = [];
function setNewTodo(value) {
newTodo = value;
}
function removeTodo(i) {
todos.splice(i, 1);
}
function addTodo(value) {
todos.push(value);
newTodo = '';
}
var TodoComponent = {
view: function() {
return m('div', [
m('ul', todos.map(function(todo, i) {
return m('li', [
m('span', todo),
m('strong', { href: '#', onclick: function() { removeTodo(i) } }, ' X'),
]);
})),
m('input', { value: newTodo, oninput: m.withAttr('value', setNewTodo) }),
m('button', { onclick: function() { addTodo(newTodo) } }, 'Add Todo'),
]);
}
};
m.mount(root, TodoComponent);
External CSS
This Pen doesn't use any external CSS resources.