Permalink
Browse files

jQuery app - code style

  • Loading branch information...
1 parent ae08e0e commit b0411a67434fec11a89d8993c9b0f309fd914e16 @sindresorhus sindresorhus committed Mar 9, 2013
Showing with 89 additions and 66 deletions.
  1. +50 −50 architecture-examples/jquery/index.html
  2. +39 −16 architecture-examples/jquery/js/app.js
@@ -1,55 +1,55 @@
<!doctype html>
<html lang="en">
-<head>
- <meta charset="utf-8">
- <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="css/app.css">
- <!--[if IE]>
- <script src="../../assets/ie.js"></script>
- <![endif]-->
-</head>
-<body>
- <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>
+ <head>
+ <meta charset="utf-8">
+ <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="css/app.css">
+ <!--[if IE]>
+ <script src="../../assets/ie.js"></script>
+ <![endif]-->
+ </head>
+ <body>
+ <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 id="footer">
+ <span id="todo-count"><strong>0</strong> item left</span>
+ <button id="clear-completed">Clear completed</button>
+ </footer>
</section>
- <footer id="footer">
- <span id="todo-count"><strong>0</strong> item left</span>
- <button id="clear-completed">Clear completed</button>
+ <footer id="info">
+ <p>Double-click to edit a todo</p>
+ <p>Created by <a href="http://github.com/sindresorhus">Sindre Sorhus</a></p>
+ <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
- </section>
- <footer id="info">
- <p>Double-click to edit a todo</p>
- <p>Created by <a href="http://github.com/sindresorhus">Sindre Sorhus</a></p>
- <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
- </footer>
- <script id="todo-template" type="text/x-handlebars-template">
- {{#this}}
- <li {{#if completed}}class="completed"{{/if}} data-id="{{id}}">
- <div class="view">
- <input class="toggle" type="checkbox" {{#if completed}}checked{{/if}}>
- <label>{{title}}</label>
- <button class="destroy"></button>
- </div>
- <input class="edit" value="{{title}}">
- </li>
- {{/this}}
- </script>
- <script id="footer-template" type="text/x-handlebars-template">
- <span id="todo-count"><strong>{{activeTodoCount}}</strong> {{activeTodoWord}} left</span>
- {{#if completedTodos}}<button id="clear-completed">Clear completed ({{completedTodos}})</button>{{/if}}
- </script>
- <script src="../../assets/base.js"></script>
- <script src="../../assets/jquery.min.js"></script>
- <script src="../../assets/handlebars.min.js"></script>
- <script src="js/app.js"></script>
-</body>
+ <script id="todo-template" type="text/x-handlebars-template">
+ {{#this}}
+ <li {{#if completed}}class="completed"{{/if}} data-id="{{id}}">
+ <div class="view">
+ <input class="toggle" type="checkbox" {{#if completed}}checked{{/if}}>
+ <label>{{title}}</label>
+ <button class="destroy"></button>
+ </div>
+ <input class="edit" value="{{title}}">
+ </li>
+ {{/this}}
+ </script>
+ <script id="footer-template" type="text/x-handlebars-template">
+ <span id="todo-count"><strong>{{activeTodoCount}}</strong> {{activeTodoWord}} left</span>
+ {{#if completedTodos}}<button id="clear-completed">Clear completed ({{completedTodos}})</button>{{/if}}
+ </script>
+ <script src="../../assets/base.js"></script>
+ <script src="../../assets/jquery.min.js"></script>
+ <script src="../../assets/handlebars.min.js"></script>
+ <script src="js/app.js"></script>
+ </body>
</html>
@@ -3,8 +3,21 @@ jQuery(function ($) {
'use strict';
var Utils = {
- // https://gist.github.com/1308368
- uuid: function (a,b){for(b=a='';a++<36;b+=a*51&52?(a^15?8^Math.random()*(a^20?16:4):4).toString(16):'-');return b},
+ uuid: function () {
+ /*jshint bitwise:false */
+ var i, random;
+ var uuid = '';
+
+ for (i = 0; i < 32; i++) {
+ random = Math.random() * 16 | 0;
+ if (i === 8 || i === 12 || i === 16 || i === 20) {
+ uuid += '-';
+ }
+ uuid += (i === 12 ? 4 : (i === 16 ? (random & 3 | 8) : random)).toString(16);
+ }
+
+ return uuid;
+ },
pluralize: function (count, word) {
return count === 1 ? word : word + 's';
},
@@ -57,47 +70,54 @@ jQuery(function ($) {
Utils.store('todos-jquery', this.todos);
},
renderFooter: function () {
- var todoCount = this.todos.length,
- activeTodoCount = this.activeTodoCount(),
- footer = {
- activeTodoCount: activeTodoCount,
- activeTodoWord: Utils.pluralize(activeTodoCount, 'item'),
- completedTodos: todoCount - activeTodoCount
- };
+ var todoCount = this.todos.length;
+ var activeTodoCount = this.activeTodoCount();
+ var footer = {
+ activeTodoCount: activeTodoCount,
+ activeTodoWord: Utils.pluralize(activeTodoCount, 'item'),
+ completedTodos: todoCount - activeTodoCount
+ };
this.$footer.toggle(!!todoCount);
this.$footer.html(this.footerTemplate(footer));
},
toggleAll: function () {
var isChecked = $(this).prop('checked');
+
$.each(App.todos, function (i, val) {
val.completed = isChecked;
});
+
App.render();
},
activeTodoCount: function () {
var count = 0;
+
$.each(this.todos, function (i, val) {
if (!val.completed) {
count++;
}
});
+
return count;
},
destroyCompleted: function () {
- var todos = App.todos,
- l = todos.length;
+ var todos = App.todos;
+ var l = todos.length;
+
while (l--) {
if (todos[l].completed) {
todos.splice(l, 1);
}
}
+
App.render();
},
- // Accepts an element from inside the ".item" div and
+ // 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) {
if (val.id === id) {
callback.apply(App, arguments);
@@ -106,16 +126,19 @@ jQuery(function ($) {
});
},
create: function (e) {
- var $input = $(this),
- val = $.trim($input.val());
+ var $input = $(this);
+ var val = $.trim($input.val());
+
if (e.which !== App.ENTER_KEY || !val) {
return;
}
+
App.todos.push({
id: Utils.uuid(),
title: val,
completed: false
});
+
$input.val('');
App.render();
},
@@ -129,12 +152,13 @@ jQuery(function ($) {
$(this).closest('li').addClass('editing').find('.edit').focus();
},
blurOnEnter: function (e) {
- if (e.keyCode === App.ENTER_KEY) {
+ if (e.which === App.ENTER_KEY) {
e.target.blur();
}
},
update: function () {
var val = $.trim($(this).removeClass('editing').val());
+
App.getTodo(this, function (i) {
if (val) {
this.todos[i].title = val;
@@ -153,5 +177,4 @@ jQuery(function ($) {
};
App.init();
-
});

0 comments on commit b0411a6

Please sign in to comment.