Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
87 lines (64 sloc) 3.02 KB
<!DOCTYPE html>
<html>
<head>
<title>Knockout.js Demo: Todos</title>
<link href="main.css" media="all" rel="stylesheet" type="text/css"/>
<script src="jquery.js"></script>
<script src="jquery.tmpl.js"></script>
<script src="jquery.placeholder.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<script src="knockout-1.1.2.debug.js" type="text/javascript"></script>
<script src="knockout-ext-debug.js" type="text/javascript"></script>
</head>
<body>
<!-- Todo App Interface -->
<div id="title">
<h2 id="current_task"><strong data-bind="visible: first().item() != ''"> Current Task: <span data-bind="text: first().item"></span></strong> Time Remaining: <span data-bind="text: time_remaining"></span></h2>
</div>
<div id="summary">
<h3>Task Summary: </h3>
<ul id="summary-list" data-bind='template: { name: "itemTemplate", foreach: tasks }'></ul>
</div>
<div id="todoapp">
<div class="content">
<div id="create-todo">
<input id="new-todo" placeholder="What needs to be done?" type="text" data-bind='value:itemToAdd, valueUpdate: "afterkeydown"' />
<input id="new-todo-hours" placeholder="hours?" type="text" data-bind='value:addTime, valueUpdate: "afterkeydown"' />
<button type="submit" data-bind="click: addItem" id="addItemButton">Add</button>
<span class="ui-tooltip-top" style="display:none;">Press Enter to save this task</span>
</div>
<div id="todos">
<ul id="todo-list" data-bind='template: { name: "itemTemplate", foreach: tasks }, event: {"sortupdate": onSort}'></ul>
</div>
<div id="todo-stats"></div>
</div>
</div>
<ul id="instructions">
<li>Add item with hours expected to take.</li>
<li>Do cool shit...</li>
</ul>
<!-- Templates -->
<script type="text/html" id="itemTemplate">
<li data-bind="attr: {id: id}, css: {done: isDone, danger: enteredTime() > hours()}">
<div class="todo_done">
<div class="display">
<div class="handle"></div>
<input class="check" type="checkbox" data-bind="checked: isDone" />
<div class="todo-content">
<input data-bind="value: item, valueUpdate: 'afterkeydown'" class="enteredItem" />
</div>
<div class="todo-hours">
<input data-bind="value: enteredTime, valueUpdate: 'afterkeydown', disable: isDone" class="enteredTime" /> /
<input data-bind="value: hours, valueUpdate: 'afterkeydown', disable: isDone" class="totalTime" />
</div>
<span class="todo-destroy" data-bind="click: remove"></span>
</div>
<div class="edit">
<input class="todo-input" type="text" value="" />
</div>
</div>
</li>
</script>
<script src="main.js"></script>
</body>
</html>