Skip to content

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

Agility - code style

parent 2b5c9aca
Show whitespace changes
Inline Side-by-side
Showing with 79 additions and 76 deletions
architecture-examples/agilityjs/index.html
View file @ 941a0ac9
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Agility.js • TodoMVC</title> <title>Agility.js • TodoMVC</title>
<link rel="stylesheet" href="components/todomvc-common/base.css"> <link rel="stylesheet" href="components/todomvc-common/base.css">
</head> </head>
<body> <body>
<section id="todoapp"> <section id="todoapp">
<header id="header"> <header id="header">
<h1>todos</h1> <h1>todos</h1>
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
<label data-bind="title"></label> <label data-bind="title"></label>
<button class="destroy"></button> <button class="destroy"></button>
</div> </div>
<input class="edit" type="text" data-bind="title"> <input class="edit" data-bind="title">
</li> </li>
</ul> </ul>
</section> </section>
...@@ -52,5 +52,5 @@ ...@@ -52,5 +52,5 @@
<script src="components/agility/agility.js"></script> <script src="components/agility/agility.js"></script>
<script src="js/localstorage.js"></script> <script src="js/localstorage.js"></script>
<script src="js/app.js"></script> <script src="js/app.js"></script>
</body> </body>
</html> </html>
architecture-examples/agilityjs/js/app.js
View file @ 941a0ac9
(function ($, $$) { (function ($, $$) {
'use strict'; 'use strict';
var ENTER_KEY = 13; var ENTER_KEY = 13;
// Hack of taking out html elements from DOM so that agility's view can use it. // hack of taking out html elements from DOM so that agility's view can use it
// We need 'outerhtml' also, as agilityjs will append DOM, so removing it. // we need 'outerhtml' also, as agilityjs will append DOM, so removing it
var drawHtml = function (selector) { var drawHtml = function (selector) {
return $(selector).remove().wrap('<div>').parent().html(); return $(selector).remove().wrap('<div>').parent().html();
}; };
// Simple Two layer composition: // simple Two layer composition:
// individual 'todoitem' and 'app'lication which holds multiple todoitems. // individual 'todoitem' and 'app' which holds multiple todoitems
$(function () { $(function () {
// todo item // todo item
var todoitem = $$({ var todoitem = $$({
...@@ -52,8 +53,10 @@ ...@@ -52,8 +53,10 @@
} }
}, },
updateTitle: function () { updateTitle: function () {
this.view.$().removeClass('editing');
var title = this.model.get('title').trim(); var title = this.model.get('title').trim();
this.view.$().removeClass('editing');
if (title) { if (title) {
this.model.set({ this.model.set({
title: title title: title
...@@ -66,7 +69,7 @@ ...@@ -66,7 +69,7 @@
collection: 'todos-agilityjs' collection: 'todos-agilityjs'
}); });
// The main application which holds todo items. // the main application which holds todo items
var app = $$({ var app = $$({
model: { model: {
todoCount: '0', todoCount: '0',
...@@ -87,14 +90,14 @@ ...@@ -87,14 +90,14 @@
'append': function () { 'append': function () {
this.updateStatus(); this.updateStatus();
}, },
'keyup #new-todo': function (event) { 'keyup #new-todo': function (e) {
var title = $('#new-todo').val().trim(); var title = $('#new-todo').val().trim();
if (event.which === ENTER_KEY && title) { if (e.which === ENTER_KEY && title) {
var item = $$(todoitem, { var item = $$(todoitem, {
title: title title: title
}).save(); }).save();
this.append(item, '#todo-list'); this.append(item, '#todo-list');
event.target.value = ''; // clear input field e.target.value = ''; // clear input field
} }
}, },
'click #toggle-all': function () { 'click #toggle-all': function () {
...@@ -116,20 +119,23 @@ ...@@ -116,20 +119,23 @@
// utility functions // utility functions
updateStatus: function () { updateStatus: function () {
// update counts // update counts
var count = this.size(), var count = this.size();
completedCount = 0; var completedCount = 0;
this.each(function (id, item) { this.each(function (id, item) {
if (item.model.get('completed')) { if (item.model.get('completed')) {
completedCount++; completedCount++;
} }
}); });
this.model.set({ this.model.set({
todoCount: count - completedCount + '', todoCount: count - completedCount + '',
pluralizer: (count - completedCount === 1 ? '' : 's'), pluralizer: count - completedCount === 1 ? '' : 's',
completedCount: completedCount + '', completedCount: completedCount + '',
mainStyle: (count === 0 ? 'hidden' : ''), mainStyle: count === 0 ? 'hidden' : '',
clearBtnStyle: (completedCount === 0 ? 'hidden' : '') clearBtnStyle: completedCount === 0 ? 'hidden' : ''
}); });
// update toggle-all checked status // update toggle-all checked status
$('#toggle-all').prop('checked', completedCount === count); $('#toggle-all').prop('checked', completedCount === count);
// update the view according to the current filter. // update the view according to the current filter.
...@@ -156,6 +162,7 @@ ...@@ -156,6 +162,7 @@
} }
} }
}).persist(); }).persist();
$$.document.prepend(app); $$.document.prepend(app);
// load from localStorage // load from localStorage
...@@ -166,16 +173,12 @@ ...@@ -166,16 +173,12 @@
var hash = location.hash; var hash = location.hash;
app.applyFilter(hash); app.applyFilter(hash);
$('#filters a').each(function () { $('#filters a').each(function () {
if (hash === $(this).attr('href')) { $(this).toggleClass('selected', hash === $(this).attr('href'));
$(this).addClass('selected');
} else {
$(this).removeClass('selected');
}
}); });
}); });
if (location.hash) { if (location.hash) {
$(window).trigger('hashchange'); $(window).trigger('hashchange');
} }
}); });
})(window.jQuery, window.agility); })(window.jQuery, window.agility);
architecture-examples/agilityjs/js/localstorage.js
View file @ 941a0ac9
...@@ -3,10 +3,10 @@ ...@@ -3,10 +3,10 @@
'use strict'; 'use strict';
$$.adapter.localStorage = function (_params) { $$.adapter.localStorage = function (_params) {
var storageKey = (this._data.persist.baseUrl || '') + this._data.persist.collection, var storageKey = (this._data.persist.baseUrl || '') + this._data.persist.collection;
storageStr = localStorage[storageKey], var storageStr = localStorage[storageKey];
items = (storageStr ? JSON.parse(storageStr) : {}); var items = (storageStr ? JSON.parse(storageStr) : {});
//
if (_params.type === 'GET') { if (_params.type === 'GET') {
if (_params.id !== undefined) { // normal get if (_params.id !== undefined) { // normal get
if (typeof items[_params.id] === 'object') { if (typeof items[_params.id] === 'object') {
......
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