Skip to content

T
todomvc
Commit dea3bd5f authored by Sindre Sorhus's avatar Sindre Sorhus
Browse files
Options

Update the jQuery app to the new template

parent e76e82fb
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 52 additions and 2087 deletions
architecture-examples/jquery/README.md 0 → 100644
View file @ dea3bd5f
# jQuery • [TodoMVC](http://todomvc.com)
## Credit
Created by [Sindre Sorhus](https://github.com/sindresorhus)
\ No newline at end of file
architecture-examples/jquery/index.html
View file @ dea3bd5f
...@@ -2,46 +2,45 @@ ...@@ -2,46 +2,45 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery - TodoMVC</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery • 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" placeholder="What needs to be done?"> <input id="new-todo" placeholder="What needs to be done?" autofocus>
</header> </header>
<section id="main"> <section id="main">
<input id="toggle-all" type="checkbox"> <input id="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label> <label for="toggle-all">Mark all as complete</label>
<ul id="todo-list"></ul> <ul id="todo-list"></ul>
</section> </section>
<footer> <footer id="footer">
<a id="clear-completed">Clear completed</a> <span id="todo-count"><strong>0</strong> item left</span>
<div id="todo-count"></div> <button id="clear-completed">Clear completed</button>
</footer> </footer>
</div> </section>
<div id="instructions"> <footer id="info">
Double-click to edit a todo. <p>Double-click to edit a todo</p>
</div> <p>App and template and created by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
<div id="credits"> <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
Created by <a href="http://sindresorhus.com">Sindre Sorhus</a>. </footer>
</div>
<script type="text/x-handlebars-template" id="todo-template"> <script type="text/x-handlebars-template" id="todo-template">
{{#this}} {{#this}}
<li {{#if done}}class="done"{{/if}} data-id="{{id}}"> <li {{#if completed}}class="completed"{{/if}} data-id="{{id}}">
<div class="view"> <div class="view">
<input class="toggle" type="checkbox" {{#if done}}checked{{/if}}> <input class="toggle" type="checkbox" {{#if completed}}checked{{/if}}>
<label>{{title}}</label> <label>{{title}}</label>
<a class="destroy"></a> <button class="destroy"></button>
</div> </div>
<input class="edit" type="text" value="{{title}}"> <input class="edit" value="{{title}}">
</li> </li>
{{/this}} {{/this}}
</script> </script>
<script src="js/libs/json2.js"></script> <script src="../../assets/jquery.min.js"></script>
<script src="js/libs/jquery-1.7.1.min.js"></script> <script src="../../assets/handlebars.min.js"></script>
<script src="js/libs/handlebars-1.0.0.beta.6.js"></script>
<script src="js/app.js"></script> <script src="js/app.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
architecture-examples/jquery/js/app.js
View file @ dea3bd5f
/* /*global jQuery, Handlebars */
jQuery(function( $ ) {
[MIT licensed](http://en.wikipedia.org/wiki/MIT_License) 'use strict';
(c) [Sindre Sorhus](http://sindresorhus.com)
*/
jQuery(function($) {
"use strict";
var Utils = { var Utils = {
// https://gist.github.com/1308368 // https://gist.github.com/1308368
...@@ -31,7 +25,7 @@ jQuery(function($) { ...@@ -31,7 +25,7 @@ jQuery(function($) {
this.$toggleAll = $('#toggle-all'); this.$toggleAll = $('#toggle-all');
this.$main = $('#main'); this.$main = $('#main');
this.$todoList = $('#todo-list'); this.$todoList = $('#todo-list');
this.$footer = this.$todoApp.find('footer'); this.$footer = this.$todoApp.find('#footer');
this.$count = $('#todo-count'); this.$count = $('#todo-count');
this.$clearBtn = $('#clear-completed'); this.$clearBtn = $('#clear-completed');
}, },
...@@ -47,7 +41,7 @@ jQuery(function($) { ...@@ -47,7 +41,7 @@ jQuery(function($) {
var list = this.$todoList; var list = this.$todoList;
this.$newTodo.on( 'keyup', this.create ); this.$newTodo.on( 'keyup', this.create );
this.$toggleAll.on( 'change', this.toggleAll ); this.$toggleAll.on( 'change', this.toggleAll );
this.$clearBtn.on( 'click', this.destroyDone ); this.$clearBtn.on( 'click', this.destroyCompleted );
list.on( 'change', '.toggle', this.toggle ); list.on( 'change', '.toggle', this.toggle );
list.on( 'dblclick', '.view', this.edit ); list.on( 'dblclick', '.view', this.edit );
list.on( 'keypress', '.edit', this.blurOnEnter ); list.on( 'keypress', '.edit', this.blurOnEnter );
...@@ -57,6 +51,7 @@ jQuery(function($) { ...@@ -57,6 +51,7 @@ jQuery(function($) {
render: function() { render: function() {
this.$todoList.html( this.template( this.todos ) ); this.$todoList.html( this.template( this.todos ) );
this.$main.toggle( !!this.todos.length ); this.$main.toggle( !!this.todos.length );
this.$toggleAll.prop( 'checked', !this.activeTodoCount() );
this.renderFooter(); this.renderFooter();
this.store( this.todos ); this.store( this.todos );
}, },
...@@ -64,8 +59,8 @@ jQuery(function($) { ...@@ -64,8 +59,8 @@ jQuery(function($) {
var todoCount = this.todos.length, var todoCount = this.todos.length,
activeTodos = this.activeTodoCount(), activeTodos = this.activeTodoCount(),
completedTodos = todoCount - activeTodos, completedTodos = todoCount - activeTodos,
countTitle = '<b>' + activeTodos + '</b> ' + Utils.pluralize( activeTodos, 'item' ) + ' left', countTitle = '<strong>' + activeTodos + '</strong> ' + Utils.pluralize( activeTodos, 'item' ) + ' left',
clearTitle = 'Clear ' + completedTodos + ' completed ' + Utils.pluralize( completedTodos, 'item' ); clearTitle = 'Clear completed (' + completedTodos + ')';
// Only show the footer when there are at least one todo. // Only show the footer when there are at least one todo.
this.$footer.toggle( !!todoCount ); this.$footer.toggle( !!todoCount );
// Active todo count // Active todo count
...@@ -74,33 +69,33 @@ jQuery(function($) { ...@@ -74,33 +69,33 @@ jQuery(function($) {
this.$clearBtn.text( clearTitle ).toggle( !!completedTodos ); this.$clearBtn.text( clearTitle ).toggle( !!completedTodos );
}, },
toggleAll: function() { toggleAll: function() {
var isChecked = !!$(this).attr('checked'); var isChecked = $( this ).prop('checked');
$.each( App.todos, function( i, val ) { $.each( App.todos, function( i, val ) {
val.done = isChecked; val.completed = isChecked;
}); });
App.render(); App.render();
}, },
activeTodoCount: function() { activeTodoCount: function() {
var count = 0; var count = 0;
$.each( this.todos, function( i, val ) { $.each( this.todos, function( i, val ) {
if ( !val.done ) { if ( !val.completed ) {
count++; count++;
} }
}); });
return count; return count;
}, },
destroyDone: function() { destroyCompleted: function() {
var todos = App.todos, var todos = App.todos,
l = todos.length; l = todos.length;
while ( l-- ) { while ( l-- ) {
if ( todos[l].done ) { if ( todos[l].completed ) {
todos.splice( l, 1 ); todos.splice( l, 1 );
} }
} }
App.$toggleAll.attr( 'checked', false );
App.render(); App.render();
}, },
// Accepts an element from inside the ".item" div and returns the corresponding todo in the todos array. // Accepts an element from inside the ".item" div and
// returns the corresponding todo in the todos array
getTodo: function( elem, callback ) { getTodo: function( elem, callback ) {
var id = $( elem ).closest('li').data('id'); var id = $( elem ).closest('li').data('id');
$.each( this.todos, function( i, val ) { $.each( this.todos, function( i, val ) {
...@@ -117,32 +112,32 @@ jQuery(function($) { ...@@ -117,32 +112,32 @@ jQuery(function($) {
return; return;
} }
App.todos.push({ App.todos.push({
title: val,
id: Utils.uuid(), id: Utils.uuid(),
done: false title: val,
completed: false
}); });
$input.val(''); $input.val('');
App.render(); App.render();
}, },
toggle: function() { toggle: function() {
App.getTodo( this, function( i, val ) { App.getTodo( this, function( i, val ) {
val.done = !val.done; val.completed = !val.completed;
}); });
App.render(); App.render();
}, },
edit: function() { edit: function() {
$(this).closest('li').addClass('editing').find('.edit').focus(); $(this).closest('li').addClass('editing').find('.edit').focus();
}, },
blurOnEnter: function(e) { blurOnEnter: function( e ) {
if ( e.keyCode === App.ENTER_KEY ) { if ( e.keyCode === App.ENTER_KEY ) {
e.target.blur(); e.target.blur();
} }
}, },
update: function() { update: function() {
var val = $(this).removeClass('editing').val(); var val = $.trim( $(this).removeClass('editing').val() );
App.getTodo( this, function(i) { App.getTodo( this, function( i ) {
if ( val ) { if ( val ) {
this.todos[i].title = val; this.todos[ i ].title = val;
} else { } else {
this.todos.splice( i, 1 ); this.todos.splice( i, 1 );
} }
...@@ -150,13 +145,13 @@ jQuery(function($) { ...@@ -150,13 +145,13 @@ jQuery(function($) {
}); });
}, },
destroy: function() { destroy: function() {
App.getTodo( this, function(i) { App.getTodo( this, function( i ) {
this.todos.splice( i, 1 ); this.todos.splice( i, 1 );
this.render(); this.render();
}); });
} }
}; };
window.TodoApp = App.init(); App.init();
}); });
\ No newline at end of file
architecture-examples/jquery/js/libs/json2.js deleted 100755 → 0
View file @ e76e82fb
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7