Skip to content

Commit 66c8a06

Browse files
josephpconleyjosephpconley
committed
basic todo app for knockout.js
1 parent e255c73 commit 66c8a06

File tree

10 files changed

+132
-0
lines changed

10 files changed

+132
-0
lines changed

‎knockoutjs-todo/config

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// Both configuration (debug/release)
2+
3+
allow-compile-js: false

‎knockoutjs-todo/controllers/default.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
exports.install = function(framework) {
2+
framework.route('/', view_homepage);
3+
};
4+
5+
function view_homepage() {
6+
var self = this;
7+
self.view('index');
8+
}

‎knockoutjs-todo/debug.js

Lines changed: 17 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎knockoutjs-todo/index.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
var framework = require('total.js');
2+
var http = require('http');
3+
var debug = true;
4+
5+
framework.run(http, debug);

‎knockoutjs-todo/public/css/default.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.completed{
2+
text-decoration: line-through;
3+
}

‎knockoutjs-todo/public/js/viewmodel.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
function Todo(description){
2+
var self = this;
3+
self.description = ko.observable(description);
4+
self.completed = ko.observable(false);
5+
}
6+
7+
function TodoApp(){
8+
var self = this;
9+
self.todos = ko.observableArray([]);
10+
self.newTodo = ko.observable("");
11+
self.saveTodo = function (data, event) {
12+
//if enter was pressed then save
13+
if (event.keyCode == 13) {
14+
self.todos.push(new Todo(self.newTodo()));
15+
self.newTodo("");
16+
}
17+
return true;
18+
}
19+
self.clearCompleted = function(){
20+
self.todos.remove(function(todo) { return todo.completed() })
21+
}
22+
}

‎knockoutjs-todo/tmp/css-default.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.completed{text-decoration:line-through;}

‎knockoutjs-todo/tmp/js-viewmodel.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
function Todo(description){
2+
var self = this;
3+
self.description = ko.observable(description);
4+
self.completed = ko.observable(false);
5+
}
6+
7+
function TodoApp(){
8+
var self = this;
9+
self.todos = ko.observableArray([]);
10+
self.newTodo = ko.observable("");
11+
self.saveTodo = function (data, event) {
12+
//if enter was pressed then save
13+
if (event.keyCode == 13) {
14+
self.todos.push(new Todo(self.newTodo()));
15+
self.newTodo("");
16+
}
17+
return true;
18+
}
19+
self.clearCompleted = function(){
20+
self.todos.remove(function(todo) { return todo.completed() })
21+
}
22+
}

‎knockoutjs-todo/views/_layout.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
@{meta}
5+
<meta charset="utf-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=10" />
7+
<meta name="format-detection" content="telephone=no" />
8+
<meta name="viewport" content="width=1024, user-scalable=yes" />
9+
<meta name="robots" content="all,follow" />
10+
11+
@{head}
12+
13+
@{css('default.css')}
14+
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
15+
16+
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
17+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
18+
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
19+
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
20+
21+
@{js('viewmodel.js')}
22+
</head>
23+
<body>
24+
<div class="container">
25+
@{body}
26+
</div>
27+
</body>
28+
</html>

‎knockoutjs-todo/views/index.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<div class="row">
2+
<h3>TODO</h3>
3+
</div>
4+
5+
<div class="row">
6+
<input class="form-control" type="text" data-bind="value: newTodo, valueUpdate: 'afterkeydown', event: { keypress: saveTodo}" placeholder="Type new TODO, hit Enter to save"/>
7+
</div>
8+
9+
<div class="row" data-bind="foreach: todos">
10+
<input class="col-md-2" type="checkbox" data-bind="checked: completed"/>
11+
<p data-bind="text: description(), css: { completed: completed() } "></p>
12+
<hr>
13+
</div>
14+
15+
<div class="row">
16+
<br>
17+
<a class="btn btn-primary" data-bind="click: clearCompleted">Clear completed</a>
18+
</div>
19+
20+
<script>
21+
var app = new TodoApp();
22+
ko.applyBindings(app);
23+
</script>

0 commit comments

Comments
 (0)