Skip to content

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

Agility - code style

parent 2b5c9aca
Hide 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>
<input id="new-todo" type="text" data-bind="newtitle" placeholder="What needs to be done?" autofocus> <input id="new-todo" type="text" data-bind="newtitle" placeholder="What needs to be done?" autofocus>
</header> </header>
<section id="main" data-bind="class = mainStyle"> <section id="main" data-bind="class = mainStyle">
<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 id="todo-list">
<li> <li>
<div class="view"> <div class="view">
<input class="toggle" type="checkbox" data-bind="completed"> <input class="toggle" type="checkbox" data-bind="completed">
<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>
<footer id="footer" data-bind="class = mainStyle">
<span id="todo-count"><strong data-bind='todoCount'></strong> item<span data-bind='pluralizer'></span> left</span>
<ul id="filters">
<li>
<a class="selected" href="#/">All</a>
</li>
<li>
<a href="#/active">Active</a>
</li>
<li>
<a href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" data-bind="class = clearBtnStyle">Clear completed (<span data-bind="completedCount"></span>)</button>
</footer>
</section> </section>
<footer id="footer" data-bind="class = mainStyle"> <footer id="info">
<span id="todo-count"><strong data-bind='todoCount'></strong> item<span data-bind='pluralizer'></span> left</span> <p>Double-click to edit a todo</p>
<ul id="filters"> <p>Created by <a href="http://github.com/tshm/todomvc/">Tosh Shimayama</a></p>
<li> <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
<a class="selected" href="#/">All</a>
</li>
<li>
<a href="#/active">Active</a>
</li>
<li>
<a href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" data-bind="class = clearBtnStyle">Clear completed (<span data-bind="completedCount"></span>)</button>
</footer> </footer>
</section> <script src="components/todomvc-common/base.js"></script>
<footer id="info"> <script src="components/jquery/jquery.js"></script>
<p>Double-click to edit a todo</p> <script src="components/agility/agility.js"></script>
<p>Created by <a href="http://github.com/tshm/todomvc/">Tosh Shimayama</a></p> <script src="js/localstorage.js"></script>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p> <script src="js/app.js"></script>
</footer> </body>
<script src="components/todomvc-common/base.js"></script>
<script src="components/jquery/jquery.js"></script>
<script src="components/agility/agility.js"></script>
<script src="js/localstorage.js"></script>
<script src="js/app.js"></script>
</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,26 +162,23 @@ ...@@ -156,26 +162,23 @@
} }
} }
}).persist(); }).persist();
$$.document.prepend(app); $$.document.prepend(app);
// load from localStorage // load from localStorage
app.gather(todoitem, 'append', '#todo-list').updateStatus(); app.gather(todoitem, 'append', '#todo-list').updateStatus();
// manual routing (not supported by agilityjs) // manual routing (not supported by agilityjs)
$(window).on('hashchange', function () { $(window).on('hashchange', function () {
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