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 @@
<html lang="en">
<head>
<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">
</head>
<body>
<div id="todoapp">
<header>
<h1>Todos</h1>
<input id="new-todo" type="text" placeholder="What needs to be done?">
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input id="new-todo" placeholder="What needs to be done?" autofocus>
</header>
<section id="main">
<input id="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list"></ul>
</section>
<footer>
<a id="clear-completed">Clear completed</a>
<div id="todo-count"></div>
<footer id="footer">
<span id="todo-count"><strong>0</strong> item left</span>
<button id="clear-completed">Clear completed</button>
</footer>
</div>
<div id="instructions">
Double-click to edit a todo.
</div>
<div id="credits">
Created by <a href="http://sindresorhus.com">Sindre Sorhus</a>.
</div>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>App and template and created by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script type="text/x-handlebars-template" id="todo-template">
{{#this}}
<li {{#if done}}class="done"{{/if}} data-id="{{id}}">
<li {{#if completed}}class="completed"{{/if}} data-id="{{id}}">
<div class="view">
<input class="toggle" type="checkbox" {{#if done}}checked{{/if}}>
<input class="toggle" type="checkbox" {{#if completed}}checked{{/if}}>
<label>{{title}}</label>
<a class="destroy"></a>
<button class="destroy"></button>
</div>
<input class="edit" type="text" value="{{title}}">
<input class="edit" value="{{title}}">
</li>
{{/this}}
</script>
<script src="js/libs/json2.js"></script>
<script src="js/libs/jquery-1.7.1.min.js"></script>
<script src="js/libs/handlebars-1.0.0.beta.6.js"></script>
<script src="../../assets/jquery.min.js"></script>
<script src="../../assets/handlebars.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
\ No newline at end of file
architecture-examples/jquery/js/app.js
View file @ dea3bd5f
/*
[MIT licensed](http://en.wikipedia.org/wiki/MIT_License)
(c) [Sindre Sorhus](http://sindresorhus.com)
*/
jQuery(function($) {
"use strict";
/*global jQuery, Handlebars */
jQuery(function( $ ) {
'use strict';
var Utils = {
// https://gist.github.com/1308368
......@@ -31,7 +25,7 @@ jQuery(function($) {
this.$toggleAll = $('#toggle-all');
this.$main = $('#main');
this.$todoList = $('#todo-list');
this.$footer = this.$todoApp.find('footer');
this.$footer = this.$todoApp.find('#footer');
this.$count = $('#todo-count');
this.$clearBtn = $('#clear-completed');
},
......@@ -47,7 +41,7 @@ jQuery(function($) {
var list = this.$todoList;
this.$newTodo.on( 'keyup', this.create );
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( 'dblclick', '.view', this.edit );
list.on( 'keypress', '.edit', this.blurOnEnter );
......@@ -57,6 +51,7 @@ jQuery(function($) {
render: function() {
this.$todoList.html( this.template( this.todos ) );
this.$main.toggle( !!this.todos.length );
this.$toggleAll.prop( 'checked', !this.activeTodoCount() );
this.renderFooter();
this.store( this.todos );
},
......@@ -64,8 +59,8 @@ jQuery(function($) {
var todoCount = this.todos.length,
activeTodos = this.activeTodoCount(),
completedTodos = todoCount - activeTodos,
countTitle = '<b>' + activeTodos + '</b> ' + Utils.pluralize( activeTodos, 'item' ) + ' left',
clearTitle = 'Clear ' + completedTodos + ' completed ' + Utils.pluralize( completedTodos, 'item' );
countTitle = '<strong>' + activeTodos + '</strong> ' + Utils.pluralize( activeTodos, 'item' ) + ' left',
clearTitle = 'Clear completed (' + completedTodos + ')';
// Only show the footer when there are at least one todo.
this.$footer.toggle( !!todoCount );
// Active todo count
......@@ -74,33 +69,33 @@ jQuery(function($) {
this.$clearBtn.text( clearTitle ).toggle( !!completedTodos );
},
toggleAll: function() {
var isChecked = !!$(this).attr('checked');
var isChecked = $( this ).prop('checked');
$.each( App.todos, function( i, val ) {
val.done = isChecked;
val.completed = isChecked;
});
App.render();
},
activeTodoCount: function() {
var count = 0;
$.each( this.todos, function( i, val ) {
if ( !val.done ) {
if ( !val.completed ) {
count++;
}
});
return count;
},
destroyDone: function() {
destroyCompleted: function() {
var todos = App.todos,
l = todos.length;
while ( l-- ) {
if ( todos[l].done ) {
if ( todos[l].completed ) {
todos.splice( l, 1 );
}
}
App.$toggleAll.attr( 'checked', false );
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 ) {
var id = $( elem ).closest('li').data('id');
$.each( this.todos, function( i, val ) {
......@@ -117,32 +112,32 @@ jQuery(function($) {
return;
}
App.todos.push({
title: val,
id: Utils.uuid(),
done: false
title: val,
completed: false
});
$input.val('');
App.render();
},
toggle: function() {
App.getTodo( this, function( i, val ) {
val.done = !val.done;
val.completed = !val.completed;
});
App.render();
},
edit: function() {
$(this).closest('li').addClass('editing').find('.edit').focus();
},
blurOnEnter: function(e) {
blurOnEnter: function( e ) {
if ( e.keyCode === App.ENTER_KEY ) {
e.target.blur();
}
},
update: function() {
var val = $(this).removeClass('editing').val();
App.getTodo( this, function(i) {
var val = $.trim( $(this).removeClass('editing').val() );
App.getTodo( this, function( i ) {
if ( val ) {
this.todos[i].title = val;
this.todos[ i ].title = val;
} else {
this.todos.splice( i, 1 );
}
......@@ -150,13 +145,13 @@ jQuery(function($) {
});
},
destroy: function() {
App.getTodo( this, function(i) {
App.getTodo( this, function( i ) {
this.todos.splice( i, 1 );
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