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>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Agility.js • TodoMVC</title>
<link rel="stylesheet" href="components/todomvc-common/base.css">
</head>
<body>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input id="new-todo" type="text" data-bind="newtitle" placeholder="What needs to be done?" autofocus>
</header>
<section id="main" data-bind="class = mainStyle">
<input id="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<li>
<div class="view">
<input class="toggle" type="checkbox" data-bind="completed">
<label data-bind="title"></label>
<button class="destroy"></button>
</div>
<input class="edit" type="text" data-bind="title">
</li>
</ul>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Agility.js • TodoMVC</title>
<link rel="stylesheet" href="components/todomvc-common/base.css">
</head>
<body>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input id="new-todo" type="text" data-bind="newtitle" placeholder="What needs to be done?" autofocus>
</header>
<section id="main" data-bind="class = mainStyle">
<input id="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<li>
<div class="view">
<input class="toggle" type="checkbox" data-bind="completed">
<label data-bind="title"></label>
<button class="destroy"></button>
</div>
<input class="edit" data-bind="title">
</li>
</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>
<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 id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://github.com/tshm/todomvc/">Tosh Shimayama</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/tshm/todomvc/">Tosh Shimayama</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<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>
<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>
architecture-examples/agilityjs/js/app.js
View file @ 941a0ac9
(function ($, $$) {
'use strict';
var ENTER_KEY = 13;
// 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.
// 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
var drawHtml = function (selector) {
return $(selector).remove().wrap('<div>').parent().html();
};
// Simple Two layer composition:
// individual 'todoitem' and 'app'lication which holds multiple todoitems.
// simple Two layer composition:
// individual 'todoitem' and 'app' which holds multiple todoitems
$(function () {
// todo item
var todoitem = $$({
......@@ -52,8 +53,10 @@
}
},
updateTitle: function () {
this.view.$().removeClass('editing');
var title = this.model.get('title').trim();
this.view.$().removeClass('editing');
if (title) {
this.model.set({
title: title
......@@ -66,7 +69,7 @@
collection: 'todos-agilityjs'
});
// The main application which holds todo items.
// the main application which holds todo items
var app = $$({
model: {
todoCount: '0',
......@@ -87,14 +90,14 @@
'append': function () {
this.updateStatus();
},
'keyup #new-todo': function (event) {
'keyup #new-todo': function (e) {
var title = $('#new-todo').val().trim();
if (event.which === ENTER_KEY && title) {
if (e.which === ENTER_KEY && title) {
var item = $$(todoitem, {
title: title
}).save();
this.append(item, '#todo-list');
event.target.value = ''; // clear input field
e.target.value = ''; // clear input field
}
},
'click #toggle-all': function () {
......@@ -116,20 +119,23 @@
// utility functions
updateStatus: function () {
// update counts
var count = this.size(),
completedCount = 0;
var count = this.size();
var completedCount = 0;
this.each(function (id, item) {
if (item.model.get('completed')) {
completedCount++;
}
});
this.model.set({
todoCount: count - completedCount + '',
pluralizer: (count - completedCount === 1 ? '' : 's'),
pluralizer: count - completedCount === 1 ? '' : 's',
completedCount: completedCount + '',
mainStyle: (count === 0 ? 'hidden' : ''),
clearBtnStyle: (completedCount === 0 ? 'hidden' : '')
mainStyle: count === 0 ? 'hidden' : '',
clearBtnStyle: completedCount === 0 ? 'hidden' : ''
});
// update toggle-all checked status
$('#toggle-all').prop('checked', completedCount === count);
// update the view according to the current filter.
......@@ -156,26 +162,23 @@
}
}
}).persist();
$$.document.prepend(app);
// load from localStorage
app.gather(todoitem, 'append', '#todo-list').updateStatus();
// manual routing (not supported by agilityjs)
// manual routing (not supported by agilityjs)
$(window).on('hashchange', function () {
var hash = location.hash;
app.applyFilter(hash);
$('#filters a').each(function () {
if (hash === $(this).attr('href')) {
$(this).addClass('selected');
} else {
$(this).removeClass('selected');
}
$(this).toggleClass('selected', hash === $(this).attr('href'));
});
});
if (location.hash) {
$(window).trigger('hashchange');
}
});
})(window.jQuery, window.agility);
architecture-examples/agilityjs/js/localstorage.js
View file @ 941a0ac9
......@@ -3,10 +3,10 @@
'use strict';
$$.adapter.localStorage = function (_params) {
var storageKey = (this._data.persist.baseUrl || '') + this._data.persist.collection,
storageStr = localStorage[storageKey],
items = (storageStr ? JSON.parse(storageStr) : {});
//
var storageKey = (this._data.persist.baseUrl || '') + this._data.persist.collection;
var storageStr = localStorage[storageKey];
var items = (storageStr ? JSON.parse(storageStr) : {});
if (_params.type === 'GET') {
if (_params.id !== undefined) { // normal get
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