Skip to content

Commit

Permalink
Landing pull request 132. Knockout.js updates for the new template an…
Browse files Browse the repository at this point in the history 
…d changes based on the Idiomatic style guide Fixes #????.

More Details:
 - #132
  • Loading branch information
@rniemeyer @sindresorhus
rniemeyer authored and sindresorhus committed Apr 14, 2012
1 parent 6a375dd commit 9120533
Show file tree
Hide file tree
Showing 6 changed files with 190 additions and 719 deletions.
102 changes: 39 additions & 63 deletions architecture-examples/knockoutjs/index.html
View file
Original file line number Original file line Diff line number Diff line change
@@ -1,71 +1,47 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Knockout.js</title> <title>Knockout.js • TodoMVC</title>
<link rel="stylesheet" href="../../assets/base.css"> <link rel="stylesheet" href="../../assets/base.css">
</head> </head>
<body> <body>
<div id="todoapp"> <section id="todoapp">
<header> <header id="header">
<h1>Todos</h1> <h1>todos</h1>
<input id="new-todo" type="text" data-bind="value: current, valueUpdate: 'afterkeydown', enterKey: add" <input id="new-todo" type="text" data-bind="value: current, valueUpdate: 'afterkeydown', enterKey: add"
placeholder="What needs to be done?"/> placeholder="What needs to be done?" autofocus >
</header> </header>
<section id="main" data-bind="block: todos().length"> <section id="main" data-bind="visible: todos().length">
<input id="toggle-all" type="checkbox" data-bind="checked: allCompleted"> <input id="toggle-all" type="checkbox" data-bind="checked: allCompleted">
<label for="toggle-all">Mark all as complete</label> <label for="toggle-all">Mark all as complete</label>
<ul id="todo-list" data-bind="foreach: todos"> <ul id="todo-list" data-bind="foreach: todos">
<li data-bind="css: { done: done, editing: editing }"> <li data-bind="css: { completed: completed, editing: editing }">
<div class="view" data-bind="event: { dblclick: $root.editItem }"> <div class="view" data-bind="event: { dblclick: $root.editItem }">
<input class="toggle" type="checkbox" data-bind="checked: done"> <input class="toggle" type="checkbox" data-bind="checked: completed">
<label data-bind="text: content"></label> <label data-bind="text: title"></label>
<a class="destroy" href="#" data-bind="click: $root.remove"></a> <button class="destroy" data-bind="click: $root.remove"></button>
</div> </div>
<input class="edit" type="text" <input class="edit" data-bind="value: title, valueUpdate: 'afterkeydown', enterKey: $root.stopEditing, selectAndFocus: editing, event: { blur: $root.stopEditing }" >
data-bind="value: content, valueUpdate: 'afterkeydown', enterKey: $root.stopEditing, selectAndFocus: editing, event: { blur: $root.stopEditing }"/> </li>
</li> </ul>
</ul> </section>
</section> <footer id="footer" data-bind="visible: completedCount() || remainingCount()">
<footer data-bind="block: completedCount() || remainingCount()"> <span id="todo-count">
<a id="clear-completed" href="#" data-bind="inline: completedCount, click: removeCompleted"> <strong data-bind="text: remainingCount">1</strong>
Clear <span data-bind="text: completedCount"></span> <span data-bind="text: getLabel( remainingCount )"></span> left
completed <span data-bind="text: getLabel(completedCount)"></span> </span>
</a> <button id="clear-completed" data-bind="visible: completedCount, click: removeCompleted">Clear completed (<span data-bind="text: completedCount"></span>)</button>
</footer>
</section>
<footer id="info">
<span data-bind="visible: todos().length">Double-click to edit a todo.</span>
<p>Original Knockout version from <a href="https://github.com/ashish01/knockoutjs-todos">Ashish Sharma</a></p>
<p>Rewritten to use Knockout 2.0 and standard template by <a href="http://knockmeout.net">Ryan Niemeyer</a></p>
<p>Patches/fixes for cross-browser compat: <a href="http://twitter.com/addyosmani">Addy Osmani</a></p>
</footer>


<div id="todo-count"> <script src="js/lib/knockout-2.0.0.js" type="text/javascript"></script>
<span data-bind="text: remainingCount"></span> <script src="js/app.js" type="text/javascript"></script>
<span data-bind="text: getLabel(remainingCount)" style="font-weight: normal"></span> left.
</div>
</footer>
</div>
<div id="instructions" data-bind="visible: todos().length">
Double-click to edit a todo.
</div>
<div id="credits">
Created by
<br/>
<a href="http://jgn.me/">J&eacute;r&ocirc;me Gravel-Niquet</a>
<br/>
Modified to use knockout.js by
<br/>
<a href="https://github.com/ashish01/knockoutjs-todos">Ashish Sharma</a>
<br/>
Updated to use knockout.js 2.0 by
<br/>
<a href="http://knockmeout.net">Ryan Niemeyer</a>
<br/>
Patches/fixes for cross-browser compat:
<br/>
<a href="http://twitter.com/addyosmani">Addy Osmani</a>
</div>
<!-- Knockout has no direct dependencies -->
<script src="js/libs/knockout-2.0.0.js" type="text/javascript"></script>
<!-- needed to support JSON.stringify in older browsers (for local storage) -->
<script src="js/libs/json2.js" type="text/javascript"></script>
<!-- used for local storage -->
<script src="js/libs/amplify.store.min.js" type="text/javascript"></script>
<!-- our app code -->
<script src="js/app.js" type="text/javascript"></script>
</body> </body>
</html> </html>
Loading

0 comments on commit 9120533

Please sign in to comment.