71 lines
2.2 KiB
HTML
71 lines
2.2 KiB
HTML
<!doctype html>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.9/es5-shim.js"></script>
|
|
<script src="mithril.js"></script>
|
|
<body>
|
|
<script>
|
|
//this application only has one component: todo
|
|
var todo = {};
|
|
|
|
//for simplicity, we use this component to namespace the model classes
|
|
|
|
//the Todo class has two properties
|
|
todo.Todo = function(data) {
|
|
this.description = m.prop(data.description);
|
|
this.done = m.prop(false);
|
|
};
|
|
|
|
//the TodoList class is a list of Todo's
|
|
todo.TodoList = Array;
|
|
|
|
//the view-model tracks a running list of todos,
|
|
//stores 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 field for user convenience
|
|
vm.add = function() {
|
|
if (vm.description()) {
|
|
vm.list.push(new todo.Todo({description: vm.description()}));
|
|
vm.description("");
|
|
}
|
|
};
|
|
}
|
|
return vm
|
|
}())
|
|
|
|
//the controller defines 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's 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>
|
|
</body>
|