Skip to content

Instantly share code, notes, and snippets.

@Satyam

Satyam/mes6.html

Created July 7, 2015 15:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Satyam/9c3ec9014855f69e5fd0 to your computer and use it in GitHub Desktop.
Save Satyam/9c3ec9014855f69e5fd0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
mes6.html
<!doctype html>
<html>
<head>
<title>Mithirl ES6 test</title>
<meta charset="UTF-8">
<script src="http://cdn.jsdelivr.net/mithril/0.2.0/mithril.min.js"></script>
<script src="node_modules/babel-core/browser.js"></script>
</head>
<body>
<script type="text/ecmascript-6">
class TodoItem {
constructor(data) {
this.descr = m.prop(data.descr);
this.done = m.prop(false);
}
}
class Todo {
constructor() {
this.list = [];
this.descr = m.prop("");
}
add() {
if (this.descr()) {
this.list.push(new TodoItem({
descr: this.descr()
}));
this.descr("");
}
}
static view(todo) {
return [
m("input", {
onchange: m.withAttr("value", todo.descr),
value: todo.descr()
}),
m("button", {
onclick: todo.add.bind(todo)
}, "Add"),
m("table", todo.list.map(task => m("tr", [
m("td",
m("input[type=checkbox]", {
onclick: m.withAttr("checked", task.done),
checked: task.done()
})
),
m("td", {
style: {
textDecoration: task.done() ? "line-through" : "none"
}
}, task.descr()),
])
)
)
];
}
}
m.mount(document, {
controller: Todo,
view: Todo.view
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment