初试Mithril.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mithril</title>
<script src="node_modules/mithril/mithril.min.js"></script>
</head>
<body>
</body>
<script>
// this simplicity , we use this component to namespace the model classes
var todo = {};
// the Todo class has two properties
todo.Todo = function(data) {
this.description = m.prop(data.description);
this.done = m.prop(false);
};
// TodoList class is a list of Todo's
todo.TodoList = Array;
// the view-model tracks a running list of todos,
// store a description for new todos before they are created
// and takes care of the logic surrounding when adding is permitted
// and clearing the input after adding a todo to the list
todo.vm = (function() {
var vm = {};
vm.init = function() {
// a running list of todos
vm.list = new todo.TodoList();
// a slot to store the name of a new todo before it is created
vm.description = m.prop("");
// adds a todo to the list, and clears the description filed for user convenience
vm.add = function() {
if (vm.description) {
vm.list.push(new todo.Todo({description: vm.description()}));
vm.description("");
}
};
}
return vm;
}())
// the controller defineds what part of the model is relevant for the current page
// in our case, there's only one view-model that handles everything
todo.controller = function() {
todo.vm.init()
};
// here is the view
todo.view = function() {
return [
m("input", {onchange: m.withAttr("value", todo.vm.description), value: todo.vm.description()}),
m("button", {onclick: todo.vm.add}, "Add"),
m("table", [
todo.vm.list.map(function(task, index) {
return 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.description()),
])
})
])
]
};
// initialize the application
m.mount(document.body, {controller: todo.controller, view: todo.view});
</script>
</html>