Skip to content

T
todomvc
Commit 9c64c82b authored by Sindre Sorhus's avatar Sindre Sorhus
Browse files
Options

PureMVC app cleanup 

- Convert to tabs
- Trim trailing whitespace
- Improve readme
parent 2dfaa8b3
Hide whitespace changes
Inline Side-by-side
Showing with 794 additions and 805 deletions
labs/architecture-examples/puremvc/README.md
View file @ 9c64c82b
## [PureMVC](http://puremvc.github.com/) [JavaScript](https://github.com/PureMVC/puremvc-js-multicore-framework/wiki) Demo - TodoMVC
This demo is a PureMVC port of the [TodoMVC Project](http://todomvc.com), a JavaScript application framework comparison demo. Given a standard html template, css, and a plain vanilla JavaScript reference app (no framework), developers are challenged to produce implementations base upon their favorite framework.
# PureMVC TodoMVC app
This demo is a [PureMVC](http://puremvc.github.com/) port of the [TodoMVC Project](http://todomvc.com), a JavaScript application framework comparison demo. Given a standard html template, css, and a plain vanilla JavaScript reference app (no framework), developers are challenged to produce implementations base upon their favorite framework.
The pseudo-classes are written in PureMVC's optional built-in style.
* [Live Demo](http://darkstar.puremvc.org/content_header.html?url=http://puremvc.org/pages/demos/JS/Demo_JS_TodoMVC/&desc=PureMVC%20JavaScript%20Demo:%20TodoMVC)
* [Discussion](http://forums.puremvc.org/index.php?topic=2049.0)
## Screenshot
![PureMVC JavaScript Demo: TodoMVC](http://puremvc.org/pages/images/screenshots/PureMVC-Shot-JS-TodoMVC.png)
## Status
Production - [Version 1.2](https://github.com/PureMVC/puremvc-js-demo-todomvc/blob/master/VERSION)
## Screenshot
## Platforms / Technologies
* [JavaScript](http://en.wikipedia.org/wiki/JavaScript)
* [TodoMVC Project](http://todomvc.com)
![PureMVC JavaScript Demo: TodoMVC](http://puremvc.org/pages/images/screenshots/PureMVC-Shot-JS-TodoMVC.png)
## License
* Original TodoMVC Demo - Copyright (c) Addy Osmani & Sindre Sorhus
* TodoMVC port to PureMVC - Copyright (c) 2012 Mike Britton and Cliff Hall
## Status
* PureMVC Framework - Copyright(c) 2006-2012 [Futurescale, Inc](http://futurescale.com).
All rights reserved.
Production - [Version 1.2](https://github.com/PureMVC/puremvc-js-demo-todomvc/blob/master/VERSION)
* Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
* Neither the name of Futurescale, Inc., PureMVC.org, nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
## Credits
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
TodoMVC port to PureMVC by Mike Britton and Cliff Hall
labs/architecture-examples/puremvc/index.html
View file @ 9c64c82b
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>PureMVC • TodoMVC</title>
<link rel="stylesheet" href="../../../assets/base.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>1</strong> item left</span>
<ul id="filters">
<li>
<a id="filterAll" class="selected" href="#/">All</a>
</li>
<li>
<a id="filterActive" href="#/active">Active</a>
</li>
<li>
<a id="filterCompleted" href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed">Clear completed (1)</button>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://puremvc.org">Mike Britton and Cliff Hall for the PureMVC Project</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<!-- TODOMVC PROJECT BASE -->
<script src="../../../assets/base.js"></script>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>PureMVC • TodoMVC</title>
<link rel="stylesheet" href="../../../assets/base.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>1</strong> item left</span>
<ul id="filters">
<li>
<a id="filterAll" class="selected" href="#/">All</a>
</li>
<li>
<a id="filterActive" href="#/active">Active</a>
</li>
<li>
<a id="filterCompleted" href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed">Clear completed (1)</button>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://puremvc.org">Mike Britton and Cliff Hall for the PureMVC Project</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<!-- FLATIRION DIRECTOR ROUTING LIBRARY -->
<script src="../../../assets/director.min.js"></script>
<!-- PUREMVC LIBRARY -->
<script src="js/lib/puremvc-1.0.1.min.js"></script>
<!-- TODOMVC PROJECT BASE -->
<script src="../../../assets/base.js"></script>
<!-- APPLICATION CONSTANTS -->
<script src="js/AppConstants.js"></script>
<!-- FLATIRION DIRECTOR ROUTING LIBRARY -->
<script src="../../../assets/director.min.js"></script>
<!-- PROXIES -->
<script src="js/model/proxy/TodoProxy.js"></script>
<!-- EVENTS -->
<script src="js/view/event/AppEvents.js"></script>
<!-- VIEW COMPONENTS -->
<script src="js/view/component/TodoForm.js"></script>
<!-- MEDIATORS -->
<script src="js/view/mediator/RoutesMediator.js"></script>
<script src="js/view/mediator/TodoFormMediator.js"></script>
<!-- PUREMVC LIBRARY -->
<script src="js/lib/puremvc.min.js"></script>
<!-- COMMANDS -->
<script src="js/controller/command/StartupCommand.js"></script>
<script src="js/controller/command/PrepControllerCommand.js"></script>
<script src="js/controller/command/PrepModelCommand.js"></script>
<script src="js/controller/command/PrepViewCommand.js"></script>
<script src="js/controller/command/TodoCommand.js"></script>
<!-- APPLICATION -->
<script src="js/app.js"></script>
<!-- START THE APPLICATION -->
<script>
document.addEventListener('DOMContentLoaded', function()
{
var app = new todomvc.Application();
});
</script>
</body>
<!-- APPLICATION CONSTANTS -->
<script src="js/AppConstants.js"></script>
<!-- PROXIES -->
<script src="js/model/proxy/TodoProxy.js"></script>
<!-- EVENTS -->
<script src="js/view/event/AppEvents.js"></script>
<!-- VIEW COMPONENTS -->
<script src="js/view/component/TodoForm.js"></script>
<!-- MEDIATORS -->
<script src="js/view/mediator/RoutesMediator.js"></script>
<script src="js/view/mediator/TodoFormMediator.js"></script>
<!-- COMMANDS -->
<script src="js/controller/command/StartupCommand.js"></script>
<script src="js/controller/command/PrepControllerCommand.js"></script>
<script src="js/controller/command/PrepModelCommand.js"></script>
<script src="js/controller/command/PrepViewCommand.js"></script>
<script src="js/controller/command/TodoCommand.js"></script>
<!-- APPLICATION -->
<script src="js/app.js"></script>
<!-- START THE APPLICATION -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var app = new todomvc.Application();
});
</script>
</body>
</html>
labs/architecture-examples/puremvc/js/AppConstants.js
View file @ 9c64c82b
......@@ -5,27 +5,26 @@
* @link https://github.com/PureMVC/puremvc-js-demo-todomvc.git
*
* Define the core and notification constants.
*
*
* PureMVC JS is multi-core, meaning you may have multiple,
* named and isolated PureMVC cores. This app only has one.
*/
puremvc.define({ name: 'todomvc.AppConstants' },{}, {
// The multiton key for this app's single core
CORE_NAME: 'TodoMVC',
// Notifications
STARTUP: 'startup',
ADD_TODO: 'add_todo',
DELETE_TODO: 'delete_todo',
UPDATE_TODO: 'update_todo',
TOGGLE_TODO_STATUS: 'toggle_todo_status',
REMOVE_TODOS_COMPLETED: 'remove_todos_completed',
FILTER_TODOS: 'filter_todos',
TODOS_FILTERED: 'todos_filtered',
puremvc.define({ name: 'todomvc.AppConstants' }, {}, {
// The multiton key for this app's single core
CORE_NAME: 'TodoMVC',
// Notifications
STARTUP: 'startup',
ADD_TODO: 'add_todo',
DELETE_TODO: 'delete_todo',
UPDATE_TODO: 'update_todo',
TOGGLE_TODO_STATUS: 'toggle_todo_status',
REMOVE_TODOS_COMPLETED: 'remove_todos_completed',
FILTER_TODOS: 'filter_todos',
TODOS_FILTERED: 'todos_filtered',
// Filter routes
FILTER_ALL: 'all',
FILTER_ACTIVE: 'active',
FILTER_COMPLETED: 'completed'
}
);
// Filter routes
FILTER_ALL: 'all',
FILTER_ACTIVE: 'active',
FILTER_COMPLETED: 'completed'
});
labs/architecture-examples/puremvc/js/app.js
View file @ 9c64c82b
......@@ -5,20 +5,20 @@
* @link https://github.com/PureMVC/puremvc-js-demo-todomvc.git
*/
puremvc.define({
name: 'todomvc.Application',
constructor: function() {
// register the startup command and trigger it.
this.facade.registerCommand( todomvc.AppConstants.STARTUP, todomvc.controller.command.StartupCommand );
this.facade.sendNotification( todomvc.AppConstants.STARTUP );
}
},
name: 'todomvc.Application',
constructor: function() {
// register the startup command and trigger it.
this.facade.registerCommand( todomvc.AppConstants.STARTUP, todomvc.controller.command.StartupCommand );
this.facade.sendNotification( todomvc.AppConstants.STARTUP );
}
},
// INSTANCE MEMBERS
{
// Define the startup notification name
STARTUP: 'startup',
// Get an instance of the PureMVC Facade. This creates the Model, View, and Controller instances.
facade: puremvc.Facade.getInstance( todomvc.AppConstants.CORE_NAME )
}
// INSTANCE MEMBERS
{
// Define the startup notification name
STARTUP: 'startup',
// Get an instance of the PureMVC Facade. This creates the Model, View, and Controller instances.
facade: puremvc.Facade.getInstance( todomvc.AppConstants.CORE_NAME )
}
);
labs/architecture-examples/puremvc/js/controller/command/PrepControllerCommand.js
View file @ 9c64c82b
/**
* @author Mike Britton, Cliff Hall
*
*
* @class PrepControllerCommand
* @link https://github.com/PureMVC/puremvc-js-demo-todomvc.git
*/
puremvc.define({
name: 'todomvc.controller.command.PrepControllerCommand',
parent: puremvc.SimpleCommand
},
// INSTANCE MEMBERS
{
/**
* Register Commands with the Controller
* @override
*/
execute: function (note) {
// This registers multiple notes to a single command which performs different logic based on the note name.
// In a more complex app, we'd usually be registering a different command to each notification name.
this.facade.registerCommand( todomvc.AppConstants.ADD_TODO, todomvc.controller.command.TodoCommand );
this.facade.registerCommand( todomvc.AppConstants.REMOVE_TODOS_COMPLETED, todomvc.controller.command.TodoCommand );
this.facade.registerCommand( todomvc.AppConstants.DELETE_TODO, todomvc.controller.command.TodoCommand );
this.facade.registerCommand( todomvc.AppConstants.UPDATE_TODO, todomvc.controller.command.TodoCommand );
this.facade.registerCommand( todomvc.AppConstants.TOGGLE_TODO_STATUS, todomvc.controller.command.TodoCommand );
this.facade.registerCommand( todomvc.AppConstants.FILTER_TODOS, todomvc.controller.command.TodoCommand );
}
}
name: 'todomvc.controller.command.PrepControllerCommand',
parent: puremvc.SimpleCommand
},
// INSTANCE MEMBERS
{
/**
* Register Commands with the Controller
* @override
*/
execute: function (note) {
// This registers multiple notes to a single command which performs different logic based on the note name.
// In a more complex app, we'd usually be registering a different command to each notification name.
this.facade.registerCommand( todomvc.AppConstants.ADD_TODO, todomvc.controller.command.TodoCommand );
this.facade.registerCommand( todomvc.AppConstants.REMOVE_TODOS_COMPLETED, todomvc.controller.command.TodoCommand );
this.facade.registerCommand( todomvc.AppConstants.DELETE_TODO, todomvc.controller.command.TodoCommand );
this.facade.registerCommand( todomvc.AppConstants.UPDATE_TODO, todomvc.controller.command.TodoCommand );
this.facade.registerCommand( todomvc.AppConstants.TOGGLE_TODO_STATUS, todomvc.controller.command.TodoCommand );
this.facade.registerCommand( todomvc.AppConstants.FILTER_TODOS, todomvc.controller.command.TodoCommand );
}
}
);
labs/architecture-examples/puremvc/js/controller/command/PrepModelCommand.js
View file @ 9c64c82b
/**
* @author Mike Britton
*
*
* @class PrepModelCommand
* @link https://github.com/PureMVC/puremvc-js-demo-todomvc.git
*/
puremvc.define({
name: 'todomvc.controller.command.PrepModelCommand',
parent: puremvc.SimpleCommand
},
// INSTANCE MEMBERS
{
/**
* Register Proxies with the Model
* @override
*/
execute: function (note) {
this.facade.registerProxy( new todomvc.model.proxy.TodoProxy() );
}
}
name: 'todomvc.controller.command.PrepModelCommand',
parent: puremvc.SimpleCommand
},
// INSTANCE MEMBERS
{
/**
* Register Proxies with the Model
* @override
*/
execute: function(note) {
this.facade.registerProxy( new todomvc.model.proxy.TodoProxy() );
}
}
);
labs/architecture-examples/puremvc/js/controller/command/PrepViewCommand.js
View file @ 9c64c82b
/**
* @author Mike Britton
*
*
* @class PrepViewCommand
* @link https://github.com/PureMVC/puremvc-js-demo-todomvc.git
*/
puremvc.define ({
name: 'todomvc.controller.command.PrepViewCommand',
parent: puremvc.SimpleCommand
},
// INSTANCE MEMBERS
{
/**
* Register Mediators with the View
* @override
*/
execute: function (note) {
this.facade.registerMediator( new todomvc.view.mediator.TodoFormMediator() );
this.facade.registerMediator( new todomvc.view.mediator.RoutesMediator() );
}
}
name: 'todomvc.controller.command.PrepViewCommand',
parent: puremvc.SimpleCommand
},
// INSTANCE MEMBERS
{
/**
* Register Mediators with the View
* @override
*/
execute: function (note) {
this.facade.registerMediator( new todomvc.view.mediator.TodoFormMediator() );
this.facade.registerMediator( new todomvc.view.mediator.RoutesMediator() );
}
}
);
labs/architecture-examples/puremvc/js/controller/command/StartupCommand.js
View file @ 9c64c82b
/**
* @author Mike Britton
*
*
* @class StartupCommand
* @link https://github.com/PureMVC/puremvc-js-demo-todomvc.git
*/
puremvc.define({
name: 'todomvc.controller.command.StartupCommand',
parent: puremvc.MacroCommand
},
name: 'todomvc.controller.command.StartupCommand',
parent: puremvc.MacroCommand
},
// INSTANCE MEMBERS
{
/**
* Add the sub-commands for this MacroCommand
* @override
*/
initializeMacroCommand: function () {
this.addSubCommand( todomvc.controller.command.PrepControllerCommand );
this.addSubCommand( todomvc.controller.command.PrepModelCommand );
this.addSubCommand( todomvc.controller.command.PrepViewCommand );
}
}
// INSTANCE MEMBERS
{
/**
* Add the sub-commands for this MacroCommand
* @override
*/
initializeMacroCommand: function () {
this.addSubCommand( todomvc.controller.command.PrepControllerCommand );
this.addSubCommand( todomvc.controller.command.PrepModelCommand );
this.addSubCommand( todomvc.controller.command.PrepViewCommand );
}
}
);
labs/architecture-examples/puremvc/js/controller/command/TodoCommand.js
View file @ 9c64c82b
/**
* @author Mike Britton, Cliff Hall
*
*
* @class TodoCommand
* @link https://github.com/PureMVC/puremvc-js-demo-todomvc.git
*/
puremvc.define ({
name: 'todomvc.controller.command.TodoCommand',
parent: puremvc.SimpleCommand
},
// INSTANCE MEMBERS
{
/**
* Perform business logic (in this case, based on Notification name)
* @override
*/
execute: function ( note ) {
var proxy = this.facade.retrieveProxy( todomvc.model.proxy.TodoProxy.NAME );
switch( note.getName() ) {
case todomvc.AppConstants.ADD_TODO:
proxy.addTodo( note.getBody() );
break;
case todomvc.AppConstants.DELETE_TODO:
proxy.deleteTodo( note.getBody() );
break;
case todomvc.AppConstants.UPDATE_TODO:
proxy.updateTodo( note.getBody() );
break;
case todomvc.AppConstants.TOGGLE_TODO_STATUS:
proxy.toggleCompleteStatus( note.getBody() );
break;
case todomvc.AppConstants.REMOVE_TODOS_COMPLETED:
proxy.removeTodosCompleted();
break;
case todomvc.AppConstants.FILTER_TODOS:
proxy.filterTodos( note.getBody() );
break;
default:
console.log('TodoCommand received an unsupported Notification');
break;
}
}
}
name: 'todomvc.controller.command.TodoCommand',
parent: puremvc.SimpleCommand
},
// INSTANCE MEMBERS
{
/**
* Perform business logic (in this case, based on Notification name)
* @override
*/
execute: function ( note ) {
var proxy = this.facade.retrieveProxy( todomvc.model.proxy.TodoProxy.NAME );
switch( note.getName() ) {
case todomvc.AppConstants.ADD_TODO:
proxy.addTodo( note.getBody() );
break;
case todomvc.AppConstants.DELETE_TODO:
proxy.deleteTodo( note.getBody() );
break;
case todomvc.AppConstants.UPDATE_TODO:
proxy.updateTodo( note.getBody() );
break;
case todomvc.AppConstants.TOGGLE_TODO_STATUS:
proxy.toggleCompleteStatus( note.getBody() );
break;
case todomvc.AppConstants.REMOVE_TODOS_COMPLETED:
proxy.removeTodosCompleted();
break;
case todomvc.AppConstants.FILTER_TODOS:
proxy.filterTodos( note.getBody() );
break;
default:
console.log('TodoCommand received an unsupported Notification');
break;
}
}
}
);
labs/architecture-examples/puremvc/js/model/proxy/TodoProxy.js
View file @ 9c64c82b
......@@ -6,142 +6,142 @@
*
*/
puremvc.define({
name: 'todomvc.model.proxy.TodoProxy',
parent: puremvc.Proxy
},
// INSTANCE MEMBERS
{
todos: [],
stats: {},
filter: todomvc.AppConstants.FILTER_ALL,
LOCAL_STORAGE: 'todos-puremvc',
onRegister: function() {
this.loadData();
},
loadData: function() {
var storageObject;
if ( !localStorage.getItem( this.LOCAL_STORAGE ) ) {
this.saveData();
}
storageObject = JSON.parse( localStorage.getItem( this.LOCAL_STORAGE ) );
this.todos = storageObject.todos;
this.filter = storageObject.filter;
this.computeStats();
},
saveData: function() {
var storageObject = { todos:this.todos, filter:this.filter };
localStorage.setItem( this.LOCAL_STORAGE, JSON.stringify( storageObject ) );
},
computeStats: function() {
this.stats.totalTodo = this.todos.length;
this.stats.todoCompleted = this.getCompletedCount();
this.stats.todoLeft = this.stats.totalTodo - this.stats.todoCompleted;
},
filterTodos: function ( filter ) {
var i;
this.filter = filter;
this.saveData();
i = this.todos.length,
filtered = [];
while ( i-- ) {
if ( filter === todomvc.AppConstants.FILTER_ALL ) {
filtered.push( this.todos[ i ] );
} else if ( this.todos[i].completed === true && filter === todomvc.AppConstants.FILTER_COMPLETED ) {
filtered.push( this.todos[ i ] );
} else if ( this.todos[i].completed === false && filter === todomvc.AppConstants.FILTER_ACTIVE ) {
filtered.push( this.todos[ i ] );
}
}
this.sendNotification( todomvc.AppConstants.TODOS_FILTERED, { todos:filtered, stats:this.stats, filter:this.filter } );
},
todosModified: function() {
this.computeStats();
this.filterTodos( this.filter );
},
removeTodosCompleted: function() {
var i = this.todos.length;
while ( i-- ) {
if ( this.todos[ i ].completed ) {
this.todos.splice( i, 1 );
}
}
this.todosModified();
},
deleteTodo: function( id ) {
var i = this.todos.length;
while ( i-- ) {
if ( this.todos[i].id === id ) {
this.todos.splice(i, 1);
}
}
this.todosModified();
},
toggleCompleteStatus: function( status ) {
var i = this.todos.length;
while ( i-- ) {
this.todos[ i ].completed = status;
}
this.todosModified();
},
updateTodo: function( todo ) {
var i = this.todos.length;
while ( i-- ) {
if ( this.todos[ i ].id === todo.id ) {
this.todos[ i ].title = todo.title;
this.todos[ i ].completed = todo.completed;
}
}
this.todosModified();
},
addTodo: function( newTodo ) {
newTodo.id = this.getUuid();
this.todos.push( newTodo );
this.todosModified();
},
getCompletedCount: function() {
var i = this.todos.length,
completed = 0;
while ( i-- ) {
if ( this.todos[ i ].completed ) {
completed++;
}
}
return completed;
},
getUuid: function() {
var i, random, 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;
}
},
// CLASS MEMBERS
{
NAME: 'TodoProxy'
}
name: 'todomvc.model.proxy.TodoProxy',
parent: puremvc.Proxy
},
// INSTANCE MEMBERS
{
todos: [],
stats: {},
filter: todomvc.AppConstants.FILTER_ALL,
LOCAL_STORAGE: 'todos-puremvc',
onRegister: function() {
this.loadData();
},
loadData: function() {
var storageObject;
if ( !localStorage.getItem( this.LOCAL_STORAGE ) ) {
this.saveData();
}
storageObject = JSON.parse( localStorage.getItem( this.LOCAL_STORAGE ) );
this.todos = storageObject.todos;
this.filter = storageObject.filter;
this.computeStats();
},
saveData: function() {
var storageObject = { todos:this.todos, filter:this.filter };
localStorage.setItem( this.LOCAL_STORAGE, JSON.stringify( storageObject ) );
},
computeStats: function() {
this.stats.totalTodo = this.todos.length;
this.stats.todoCompleted = this.getCompletedCount();
this.stats.todoLeft = this.stats.totalTodo - this.stats.todoCompleted;
},
filterTodos: function ( filter ) {
var i;
this.filter = filter;
this.saveData();
i = this.todos.length,
filtered = [];
while ( i-- ) {
if ( filter === todomvc.AppConstants.FILTER_ALL ) {
filtered.push( this.todos[ i ] );
} else if ( this.todos[i].completed === true && filter === todomvc.AppConstants.FILTER_COMPLETED ) {
filtered.push( this.todos[ i ] );
} else if ( this.todos[i].completed === false && filter === todomvc.AppConstants.FILTER_ACTIVE ) {
filtered.push( this.todos[ i ] );
}
}
this.sendNotification( todomvc.AppConstants.TODOS_FILTERED, { todos:filtered, stats:this.stats, filter:this.filter } );
},
todosModified: function() {
this.computeStats();
this.filterTodos( this.filter );
},
removeTodosCompleted: function() {
var i = this.todos.length;
while ( i-- ) {
if ( this.todos[ i ].completed ) {
this.todos.splice( i, 1 );
}
}
this.todosModified();
},
deleteTodo: function( id ) {
var i = this.todos.length;
while ( i-- ) {
if ( this.todos[i].id === id ) {
this.todos.splice(i, 1);
}
}
this.todosModified();
},
toggleCompleteStatus: function( status ) {
var i = this.todos.length;
while ( i-- ) {
this.todos[ i ].completed = status;
}
this.todosModified();
},
updateTodo: function( todo ) {
var i = this.todos.length;
while ( i-- ) {
if ( this.todos[ i ].id === todo.id ) {
this.todos[ i ].title = todo.title;
this.todos[ i ].completed = todo.completed;
}
}
this.todosModified();
},
addTodo: function( newTodo ) {
newTodo.id = this.getUuid();
this.todos.push( newTodo );
this.todosModified();
},
getCompletedCount: function() {
var i = this.todos.length,
completed = 0;
while ( i-- ) {
if ( this.todos[ i ].completed ) {
completed++;
}
}
return completed;
},
getUuid: function() {
var i, random, 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;
}
},
// CLASS MEMBERS
{
NAME: 'TodoProxy'
}
);
labs/architecture-examples/puremvc/js/view/component/TodoForm.js
View file @ 9c64c82b
......@@ -5,254 +5,254 @@
* @link https://github.com/PureMVC/puremvc-js-demo-todomvc.git
*/
puremvc.define({
name: 'todomvc.view.component.TodoForm',
constructor: function(event) {
// data
this.todos = [];
this.stats = {};
this.filter = '';
// Fixed DOM elements managed by this view component
this.todoApp = document.querySelector( '#todoapp' );
this.main = this.todoApp.querySelector( '#main' );
this.toggleAllCheckbox = this.todoApp.querySelector( '#toggle-all' );
this.newTodoField = this.todoApp.querySelector( '#new-todo' );
this.todoList = this.todoApp.querySelector( '#todo-list' );
this.footer = this.todoApp.querySelector( '#footer' );
this.todoCount = this.todoApp.querySelector( '#todo-count' );
this.clearButton = this.todoApp.querySelector( '#clear-completed' );
this.filters = this.todoApp.querySelector( '#filters' );
this.filterAll = this.filters.querySelector( '#filterAll' );
this.filterActive = this.filters.querySelector( '#filterActive' );
this.filterCompleted = this.filters.querySelector( '#filterCompleted' );
// Event listeners for fixed UI elements
this.newTodoField.component = this;
todomvc.view.event.AppEvents.addEventListener( this.newTodoField, 'keypress', function( event ) {
if ( event.keyCode === this.component.ENTER_KEY && this.value ) {
this.component.dispatchAddTodo( event );
}
});
this.clearButton.component = this;
todomvc.view.event.AppEvents.addEventListener( this.clearButton, 'click', function( event ) {
this.component.dispatchClearCompleted( event );
});
this.toggleAllCheckbox.component = this;
todomvc.view.event.AppEvents.addEventListener( this.toggleAllCheckbox, 'change', function( event ) {
this.component.dispatchToggleCompleteAll( event.target.checked );
});
}
},
// INSTANCE MEMBERS
{
ENTER_KEY: 13,
addEventListener: function ( type, listener, useCapture ){
todomvc.view.event.AppEvents.addEventListener ( this.todoApp, type, listener, useCapture );
},
createEvent: function( eventName ) {
return todomvc.view.event.AppEvents.createEvent( eventName );
},
dispatchEvent: function( event ) {
todomvc.view.event.AppEvents.dispatchEvent( this.todoApp, event );
},
dispatchToggleComplete: function( event ) {
var todo, toggleItemCompleteEvent;
todo = this.getTodoById( event.target.getAttribute( 'data-todo-id' ) );
todo.id = event.target.getAttribute( 'data-todo-id' );
todo.completed = event.target.checked;
toggleItemCompleteEvent = this.createEvent( todomvc.view.event.AppEvents.TOGGLE_COMPLETE );
toggleItemCompleteEvent.todo = todo;
this.dispatchEvent( toggleItemCompleteEvent );
},
dispatchToggleCompleteAll: function( checked ) {
var toggleCompleteAllEvent = this.createEvent( todomvc.view.event.AppEvents.TOGGLE_COMPLETE_ALL );
toggleCompleteAllEvent.doToggleComplete = checked;
this.dispatchEvent( toggleCompleteAllEvent );
},
dispatchClearCompleted: function() {
var clearCompleteEvent = this.createEvent( todomvc.view.event.AppEvents.CLEAR_COMPLETED );
this.dispatchEvent( clearCompleteEvent );
},
dispatchDelete: function( id ) {
var deleteItemEvent = this.createEvent( todomvc.view.event.AppEvents.DELETE_ITEM );
deleteItemEvent.todoId = id;
this.dispatchEvent( deleteItemEvent );
},
dispatchAddTodo: function( event ) {
var addItemEvent, todo = {};
todo.completed = false;
todo.title = this.newTodoField.value.trim();
if ( todo.title === '' ) return;
addItemEvent = this.createEvent( todomvc.view.event.AppEvents.ADD_ITEM );
addItemEvent.todo = todo;
this.dispatchEvent( addItemEvent );
},
dispatchUpdateTodo: function(event) {
var eventType, updateItemEvent, todo = {};
todo.id = event.target.id.slice(6);
todo.title = event.target.value.trim();
todo.completed = event.target.completed;
eventType = ( todo.title === "" ) ?
todomvc.view.event.AppEvents.DELETE_ITEM : todomvc.view.event.AppEvents.UPDATE_ITEM;
updateItemEvent = this.createEvent( eventType );
updateItemEvent.todo = todo;
updateItemEvent.todoId = todo.id;
this.dispatchEvent( updateItemEvent );
},
setFilteredTodoList: function( data ) {
var todo, checkbox, label, deleteLink, divDisplay,
inputEditTodo, li, i, todoId, div, inputEditTodo;
// Update instance data
this.todos = data.todos;
this.stats = data.stats;
this.filter = data.filter;
// Hide main section if no todos
this.main.style.display = this.stats.totalTodo ? 'block' : 'none';
// Create Todo list
this.todoList.innerHTML = '';
this.newTodoField.value = '';
for ( i=0; i < this.todos.length; i++ ) {
todo = this.todos[i];
// Create checkbox
checkbox = document.createElement( 'input' );
checkbox.className = 'toggle';
checkbox.setAttribute( 'data-todo-id', todo.id );
checkbox.type = 'checkbox';
checkbox.component = this;
todomvc.view.event.AppEvents.addEventListener( checkbox, 'change', function( event ) {
this.component.dispatchToggleComplete( event );
});
// Create div text
label = document.createElement( 'label' );
label.setAttribute( 'data-todo-id', todo.id );
label.appendChild( document.createTextNode( todo.title ) );
// Create delete button
deleteLink = document.createElement( 'button' );
deleteLink.className = 'destroy';
deleteLink.setAttribute( 'data-todo-id', todo.id );
deleteLink.component = this;
todomvc.view.event.AppEvents.addEventListener( deleteLink, 'click', function( event ) {
this.component.dispatchDelete( event.target.getAttribute( 'data-todo-id' ) );
});
// Create divDisplay
divDisplay = document.createElement( 'div' );
divDisplay.className = 'view';
divDisplay.setAttribute( 'data-todo-id', todo.id );
divDisplay.appendChild( checkbox );
divDisplay.appendChild( label );
divDisplay.appendChild( deleteLink );
todomvc.view.event.AppEvents.addEventListener( divDisplay, 'dblclick', function() {
todoId = this.getAttribute( 'data-todo-id' );
div = document.getElementById( 'li_' + todoId );
inputEditTodo = document.getElementById( 'input_' + todoId );
div.className = 'editing';
inputEditTodo.focus();
});
// Create todo input
inputEditTodo = document.createElement( 'input' );
inputEditTodo.id = 'input_' + todo.id;
inputEditTodo.className = 'edit';
inputEditTodo.value = todo.title;
inputEditTodo.completed = todo.completed;
inputEditTodo.component = this;
todomvc.view.event.AppEvents.addEventListener( inputEditTodo, 'keypress', function( event ) {
if ( event.keyCode === this.component.ENTER_KEY ) {
this.component.dispatchUpdateTodo( event );
}
});
todomvc.view.event.AppEvents.addEventListener( inputEditTodo, 'blur', function( event ) {
this.component.dispatchUpdateTodo( event );
});
// Create Todo ListItem and add to list
li = document.createElement( 'li' );
li.id = 'li_' + todo.id;
li.appendChild( divDisplay );
li.appendChild( inputEditTodo );
if ( todo.completed ) {
li.className += 'complete';
checkbox.checked = true;
}
this.todoList.appendChild( li );
}
// Update UI
this.footer.style.display = this.stats.totalTodo ? 'block' : 'none';
this.updateToggleAllCheckbox();
this.updateClearButton();
this.updateTodoCount();
this.updateFilter();
},
getTodoById: function( id ) {
var i;
for ( i = 0; i < this.todos.length; i++ ) {
if ( this.todos[ i ].id === id ) {
return this.todos[i];
}
}
},
updateFilter: function() {
this.filterAll.className = ( this.filter === todomvc.AppConstants.FILTER_ALL ) ? 'selected' : '';
this.filterActive.className = ( this.filter === todomvc.AppConstants.FILTER_ACTIVE ) ? 'selected' : '';
this.filterCompleted.className = ( this.filter === todomvc.AppConstants.FILTER_COMPLETED ) ? 'selected' : '';
},
updateToggleAllCheckbox: function() {
var i, checked = ( this.todos.length > 0 );
for ( i = 0; i < this.todos.length; i++ ) {
if ( this.todos[ i ].completed === false ) {
checked = false;
break;
}
}
this.toggleAllCheckbox.checked = checked;
},
updateClearButton: function() {
this.clearButton.style.display = ( this.stats.todoCompleted === 0 ) ? 'none' : 'block';
this.clearButton.innerHTML = 'Clear completed (' + this.stats.todoCompleted + ')';
},
updateTodoCount: function() {
var number = document.createElement( 'strong' ),
text = ' ' + (this.stats.todoLeft === 1 ? 'item' : 'items' ) + ' left';
number.innerHTML = this.stats.todoLeft;
this.todoCount.innerHTML = null;
this.todoCount.appendChild( number );
this.todoCount.appendChild( document.createTextNode( text ) );
}
},
// STATIC MEMBERS
{
NAME: 'TodoForm',
}
name: 'todomvc.view.component.TodoForm',
constructor: function(event) {
// data
this.todos = [];
this.stats = {};
this.filter = '';
// Fixed DOM elements managed by this view component
this.todoApp = document.querySelector( '#todoapp' );
this.main = this.todoApp.querySelector( '#main' );
this.toggleAllCheckbox = this.todoApp.querySelector( '#toggle-all' );
this.newTodoField = this.todoApp.querySelector( '#new-todo' );
this.todoList = this.todoApp.querySelector( '#todo-list' );
this.footer = this.todoApp.querySelector( '#footer' );
this.todoCount = this.todoApp.querySelector( '#todo-count' );
this.clearButton = this.todoApp.querySelector( '#clear-completed' );
this.filters = this.todoApp.querySelector( '#filters' );
this.filterAll = this.filters.querySelector( '#filterAll' );
this.filterActive = this.filters.querySelector( '#filterActive' );
this.filterCompleted = this.filters.querySelector( '#filterCompleted' );
// Event listeners for fixed UI elements
this.newTodoField.component = this;
todomvc.view.event.AppEvents.addEventListener( this.newTodoField, 'keypress', function( event ) {
if ( event.keyCode === this.component.ENTER_KEY && this.value ) {
this.component.dispatchAddTodo( event );
}
});
this.clearButton.component = this;
todomvc.view.event.AppEvents.addEventListener( this.clearButton, 'click', function( event ) {
this.component.dispatchClearCompleted( event );
});
this.toggleAllCheckbox.component = this;
todomvc.view.event.AppEvents.addEventListener( this.toggleAllCheckbox, 'change', function( event ) {
this.component.dispatchToggleCompleteAll( event.target.checked );
});
}
},
// INSTANCE MEMBERS
{
ENTER_KEY: 13,
addEventListener: function ( type, listener, useCapture ){
todomvc.view.event.AppEvents.addEventListener ( this.todoApp, type, listener, useCapture );
},
createEvent: function( eventName ) {
return todomvc.view.event.AppEvents.createEvent( eventName );
},
dispatchEvent: function( event ) {
todomvc.view.event.AppEvents.dispatchEvent( this.todoApp, event );
},
dispatchToggleComplete: function( event ) {
var todo, toggleItemCompleteEvent;
todo = this.getTodoById( event.target.getAttribute( 'data-todo-id' ) );
todo.id = event.target.getAttribute( 'data-todo-id' );
todo.completed = event.target.checked;
toggleItemCompleteEvent = this.createEvent( todomvc.view.event.AppEvents.TOGGLE_COMPLETE );
toggleItemCompleteEvent.todo = todo;
this.dispatchEvent( toggleItemCompleteEvent );
},
dispatchToggleCompleteAll: function( checked ) {
var toggleCompleteAllEvent = this.createEvent( todomvc.view.event.AppEvents.TOGGLE_COMPLETE_ALL );
toggleCompleteAllEvent.doToggleComplete = checked;
this.dispatchEvent( toggleCompleteAllEvent );
},
dispatchClearCompleted: function() {
var clearCompleteEvent = this.createEvent( todomvc.view.event.AppEvents.CLEAR_COMPLETED );
this.dispatchEvent( clearCompleteEvent );
},
dispatchDelete: function( id ) {
var deleteItemEvent = this.createEvent( todomvc.view.event.AppEvents.DELETE_ITEM );
deleteItemEvent.todoId = id;
this.dispatchEvent( deleteItemEvent );
},
dispatchAddTodo: function( event ) {
var addItemEvent, todo = {};
todo.completed = false;
todo.title = this.newTodoField.value.trim();
if ( todo.title === '' ) return;
addItemEvent = this.createEvent( todomvc.view.event.AppEvents.ADD_ITEM );
addItemEvent.todo = todo;
this.dispatchEvent( addItemEvent );
},
dispatchUpdateTodo: function(event) {
var eventType, updateItemEvent, todo = {};
todo.id = event.target.id.slice(6);
todo.title = event.target.value.trim();
todo.completed = event.target.completed;
eventType = ( todo.title === "" ) ?
todomvc.view.event.AppEvents.DELETE_ITEM : todomvc.view.event.AppEvents.UPDATE_ITEM;
updateItemEvent = this.createEvent( eventType );
updateItemEvent.todo = todo;
updateItemEvent.todoId = todo.id;
this.dispatchEvent( updateItemEvent );
},
setFilteredTodoList: function( data ) {
var todo, checkbox, label, deleteLink, divDisplay,
inputEditTodo, li, i, todoId, div, inputEditTodo;
// Update instance data
this.todos = data.todos;
this.stats = data.stats;
this.filter = data.filter;
// Hide main section if no todos
this.main.style.display = this.stats.totalTodo ? 'block' : 'none';
// Create Todo list
this.todoList.innerHTML = '';
this.newTodoField.value = '';
for ( i=0; i < this.todos.length; i++ ) {
todo = this.todos[i];
// Create checkbox
checkbox = document.createElement( 'input' );
checkbox.className = 'toggle';
checkbox.setAttribute( 'data-todo-id', todo.id );
checkbox.type = 'checkbox';
checkbox.component = this;
todomvc.view.event.AppEvents.addEventListener( checkbox, 'change', function( event ) {
this.component.dispatchToggleComplete( event );
});
// Create div text
label = document.createElement( 'label' );
label.setAttribute( 'data-todo-id', todo.id );
label.appendChild( document.createTextNode( todo.title ) );
// Create delete button
deleteLink = document.createElement( 'button' );
deleteLink.className = 'destroy';
deleteLink.setAttribute( 'data-todo-id', todo.id );
deleteLink.component = this;
todomvc.view.event.AppEvents.addEventListener( deleteLink, 'click', function( event ) {
this.component.dispatchDelete( event.target.getAttribute( 'data-todo-id' ) );
});
// Create divDisplay
divDisplay = document.createElement( 'div' );
divDisplay.className = 'view';
divDisplay.setAttribute( 'data-todo-id', todo.id );
divDisplay.appendChild( checkbox );
divDisplay.appendChild( label );
divDisplay.appendChild( deleteLink );
todomvc.view.event.AppEvents.addEventListener( divDisplay, 'dblclick', function() {
todoId = this.getAttribute( 'data-todo-id' );
div = document.getElementById( 'li_' + todoId );
inputEditTodo = document.getElementById( 'input_' + todoId );
div.className = 'editing';
inputEditTodo.focus();
});
// Create todo input
inputEditTodo = document.createElement( 'input' );
inputEditTodo.id = 'input_' + todo.id;
inputEditTodo.className = 'edit';
inputEditTodo.value = todo.title;
inputEditTodo.completed = todo.completed;
inputEditTodo.component = this;
todomvc.view.event.AppEvents.addEventListener( inputEditTodo, 'keypress', function( event ) {
if ( event.keyCode === this.component.ENTER_KEY ) {
this.component.dispatchUpdateTodo( event );
}
});
todomvc.view.event.AppEvents.addEventListener( inputEditTodo, 'blur', function( event ) {
this.component.dispatchUpdateTodo( event );
});
// Create Todo ListItem and add to list
li = document.createElement( 'li' );
li.id = 'li_' + todo.id;
li.appendChild( divDisplay );
li.appendChild( inputEditTodo );
if ( todo.completed ) {
li.className += 'complete';
checkbox.checked = true;
}
this.todoList.appendChild( li );
}
// Update UI
this.footer.style.display = this.stats.totalTodo ? 'block' : 'none';
this.updateToggleAllCheckbox();
this.updateClearButton();
this.updateTodoCount();
this.updateFilter();
},
getTodoById: function( id ) {
var i;
for ( i = 0; i < this.todos.length; i++ ) {
if ( this.todos[ i ].id === id ) {
return this.todos[i];
}
}
},
updateFilter: function() {
this.filterAll.className = ( this.filter === todomvc.AppConstants.FILTER_ALL ) ? 'selected' : '';
this.filterActive.className = ( this.filter === todomvc.AppConstants.FILTER_ACTIVE ) ? 'selected' : '';
this.filterCompleted.className = ( this.filter === todomvc.AppConstants.FILTER_COMPLETED ) ? 'selected' : '';
},
updateToggleAllCheckbox: function() {
var i, checked = ( this.todos.length > 0 );
for ( i = 0; i < this.todos.length; i++ ) {
if ( this.todos[ i ].completed === false ) {
checked = false;
break;
}
}
this.toggleAllCheckbox.checked = checked;
},
updateClearButton: function() {
this.clearButton.style.display = ( this.stats.todoCompleted === 0 ) ? 'none' : 'block';
this.clearButton.innerHTML = 'Clear completed (' + this.stats.todoCompleted + ')';
},
updateTodoCount: function() {
var number = document.createElement( 'strong' ),
text = ' ' + (this.stats.todoLeft === 1 ? 'item' : 'items' ) + ' left';
number.innerHTML = this.stats.todoLeft;
this.todoCount.innerHTML = null;
this.todoCount.appendChild( number );
this.todoCount.appendChild( document.createTextNode( text ) );
}
},
// STATIC MEMBERS
{
NAME: 'TodoForm',
}
);
labs/architecture-examples/puremvc/js/view/event/AppEvents.js
View file @ 9c64c82b
......@@ -4,45 +4,45 @@
* @class AppEvents
* @link https://github.com/PureMVC/puremvc-js-demo-todomvc.git
*/
puremvc.define({ name: 'todomvc.view.event.AppEvents' }, {},
// STATIC MEMBERS
{
// Event name constants
TOGGLE_COMPLETE_ALL: 'toggle_complete_all',
TOGGLE_COMPLETE: 'toggle_complete',
CLEAR_COMPLETED: 'clear_completed',
DELETE_ITEM: 'delete_item',
UPDATE_ITEM: 'update_item',
ADD_ITEM: 'add_item',
// Create event (cross-browser)
createEvent: function( eventName ) {
var event;
if( document.createEvent ) {
event = document.createEvent( 'Events' );
event.initEvent( eventName, false, false );
} else if ( document.createEventObject ) {
event = document.createEventObject();
}
return event;
},
// Add event listener (cross-browser)
addEventListener: function( object, type, listener, useCapture ) {
if ( object.addEventListener ) {
object.addEventListener( type, listener, useCapture );
} else if ( object.attachEvent ) {
object.attachEvent( type, listener );
}
},
// Dispatch event (cross-browser)
dispatchEvent: function( object, event ) {
if ( object.dispatchEvent ) {
object.dispatchEvent( event );
} else if ( object.fireEvent ) {
object.fireEvent( event.type, event );
}
},
}
puremvc.define({ name: 'todomvc.view.event.AppEvents' }, {},
// STATIC MEMBERS
{
// Event name constants
TOGGLE_COMPLETE_ALL: 'toggle_complete_all',
TOGGLE_COMPLETE: 'toggle_complete',
CLEAR_COMPLETED: 'clear_completed',
DELETE_ITEM: 'delete_item',
UPDATE_ITEM: 'update_item',
ADD_ITEM: 'add_item',
// Create event (cross-browser)
createEvent: function( eventName ) {
var event;
if ( document.createEvent ) {
event = document.createEvent( 'Events' );
event.initEvent( eventName, false, false );
} else if ( document.createEventObject ) {
event = document.createEventObject();
}
return event;
},
// Add event listener (cross-browser)
addEventListener: function( object, type, listener, useCapture ) {
if ( object.addEventListener ) {
object.addEventListener( type, listener, useCapture );
} else if ( object.attachEvent ) {
object.attachEvent( type, listener );
}
},
// Dispatch event (cross-browser)
dispatchEvent: function( object, event ) {
if ( object.dispatchEvent ) {
object.dispatchEvent( event );
} else if ( object.fireEvent ) {
object.fireEvent( event.type, event );
}
},
}
);
labs/architecture-examples/puremvc/js/view/mediator/RoutesMediator.js
View file @ 9c64c82b
/**
* @author Cliff Hall
*
*
* @class RoutesMediator
* @link https://github.com/PureMVC/puremvc-js-demo-todomvc.git
*/
puremvc.define({
name: 'todomvc.view.mediator.RoutesMediator',
parent: puremvc.Mediator
},
// INSTANCE MEMBERS
{
// the router (Flatirion Director)
router: null,
// setup the routes when mediator is registered
onRegister: function() {
var todoProxy = this.facade.retrieveProxy( todomvc.model.proxy.TodoProxy.NAME ),
defaultRoute = this.getRouteForFilter( todoProxy.filter ),
options = { resource:this, notfound:this.handleFilterAll },
routes = {
'/': this.handleFilterAll,
'/active': this.handleFilterActive,
'/completed': this.handleFilterCompleted
};
this.router = new Router( routes ).configure( options );
this.router.init( defaultRoute );
},
getRouteForFilter: function( filter ) {
var route;
switch (filter) {
case todomvc.AppConstants.FILTER_ALL:
route = '/';
break;
case todomvc.AppConstants.FILTER_ACTIVE:
route = '/active';
break;
case todomvc.AppConstants.FILTER_COMPLETED:
route = '/completed';
break;
}
return route;
},
// route handlers
handleFilterAll: function () {
this.resource.facade.sendNotification( todomvc.AppConstants.FILTER_TODOS, todomvc.AppConstants.FILTER_ALL );
},
handleFilterActive: function () {
this.resource.facade.sendNotification( todomvc.AppConstants.FILTER_TODOS, todomvc.AppConstants.FILTER_ACTIVE );
},
handleFilterCompleted: function () {
this.resource.facade.sendNotification( todomvc.AppConstants.FILTER_TODOS, todomvc.AppConstants.FILTER_COMPLETED );
},
},
// STATIC MEMBERS
{
NAME: 'RoutesMediator'
}
name: 'todomvc.view.mediator.RoutesMediator',
parent: puremvc.Mediator
},
// INSTANCE MEMBERS
{
// the router (Flatirion Director)
router: null,
// setup the routes when mediator is registered
onRegister: function() {
var todoProxy = this.facade.retrieveProxy( todomvc.model.proxy.TodoProxy.NAME ),
defaultRoute = this.getRouteForFilter( todoProxy.filter ),
options = { resource:this, notfound:this.handleFilterAll },
routes = {
'/': this.handleFilterAll,
'/active': this.handleFilterActive,
'/completed': this.handleFilterCompleted
};
this.router = new Router( routes ).configure( options );
this.router.init( defaultRoute );
},
getRouteForFilter: function( filter ) {
var route;
switch (filter) {
case todomvc.AppConstants.FILTER_ALL:
route = '/';
break;
case todomvc.AppConstants.FILTER_ACTIVE:
route = '/active';
break;
case todomvc.AppConstants.FILTER_COMPLETED:
route = '/completed';
break;
}
return route;
},
// route handlers
handleFilterAll: function () {
this.resource.facade.sendNotification( todomvc.AppConstants.FILTER_TODOS, todomvc.AppConstants.FILTER_ALL );
},
handleFilterActive: function () {
this.resource.facade.sendNotification( todomvc.AppConstants.FILTER_TODOS, todomvc.AppConstants.FILTER_ACTIVE );
},
handleFilterCompleted: function () {
this.resource.facade.sendNotification( todomvc.AppConstants.FILTER_TODOS, todomvc.AppConstants.FILTER_COMPLETED );
},
},
// STATIC MEMBERS
{
NAME: 'RoutesMediator'
}
);
labs/architecture-examples/puremvc/js/view/mediator/TodoFormMediator.js
View file @ 9c64c82b
/**
* @author Mike Britton
*
*
* @class TodoFormMediator
* @link https://github.com/PureMVC/puremvc-js-demo-todomvc.git
*/
puremvc.define({
name: 'todomvc.view.mediator.TodoFormMediator',
parent: puremvc.Mediator
},
// INSTANCE MEMBERS
{
// Notifications this mediator is interested in
listNotificationInterests: function() {
return [ todomvc.AppConstants.TODOS_FILTERED ];
},
// Code to be executed when the Mediator instance is registered with the View
onRegister: function() {
this.setViewComponent( new todomvc.view.component.TodoForm );
this.viewComponent.addEventListener( todomvc.view.event.AppEvents.TOGGLE_COMPLETE, this );
this.viewComponent.addEventListener( todomvc.view.event.AppEvents.TOGGLE_COMPLETE_ALL, this );
this.viewComponent.addEventListener( todomvc.view.event.AppEvents.UPDATE_ITEM, this );
this.viewComponent.addEventListener( todomvc.view.event.AppEvents.DELETE_ITEM, this );
this.viewComponent.addEventListener( todomvc.view.event.AppEvents.ADD_ITEM, this );
this.viewComponent.addEventListener( todomvc.view.event.AppEvents.CLEAR_COMPLETED, this );
},
// Handle events from the view component
handleEvent: function ( event ) {
switch( event.type ) {
case todomvc.view.event.AppEvents.TOGGLE_COMPLETE_ALL:
this.sendNotification( todomvc.AppConstants.TOGGLE_TODO_STATUS, event.doToggleComplete );
break;
case todomvc.view.event.AppEvents.DELETE_ITEM:
this.sendNotification( todomvc.AppConstants.DELETE_TODO, event.todoId );
break;
case todomvc.view.event.AppEvents.ADD_ITEM:
this.sendNotification( todomvc.AppConstants.ADD_TODO, event.todo );
break;
case todomvc.view.event.AppEvents.CLEAR_COMPLETED:
this.sendNotification( todomvc.AppConstants.REMOVE_TODOS_COMPLETED );
break;
case todomvc.view.event.AppEvents.TOGGLE_COMPLETE:
case todomvc.view.event.AppEvents.UPDATE_ITEM:
this.sendNotification( todomvc.AppConstants.UPDATE_TODO, event.todo );
break;
}
},
// Handle notifications from other PureMVC actors
handleNotification: function( note ) {
switch ( note.getName() ) {
case todomvc.AppConstants.TODOS_FILTERED:
this.viewComponent.setFilteredTodoList( note.getBody() );
break;
}
},
},
// STATIC MEMBERS
{
NAME: 'TodoFormMediator'
}
name: 'todomvc.view.mediator.TodoFormMediator',
parent: puremvc.Mediator
},
// INSTANCE MEMBERS
{
// Notifications this mediator is interested in
listNotificationInterests: function() {
return [ todomvc.AppConstants.TODOS_FILTERED ];
},
// Code to be executed when the Mediator instance is registered with the View
onRegister: function() {
this.setViewComponent( new todomvc.view.component.TodoForm );
this.viewComponent.addEventListener( todomvc.view.event.AppEvents.TOGGLE_COMPLETE, this );
this.viewComponent.addEventListener( todomvc.view.event.AppEvents.TOGGLE_COMPLETE_ALL, this );
this.viewComponent.addEventListener( todomvc.view.event.AppEvents.UPDATE_ITEM, this );
this.viewComponent.addEventListener( todomvc.view.event.AppEvents.DELETE_ITEM, this );
this.viewComponent.addEventListener( todomvc.view.event.AppEvents.ADD_ITEM, this );
this.viewComponent.addEventListener( todomvc.view.event.AppEvents.CLEAR_COMPLETED, this );
},
// Handle events from the view component
handleEvent: function ( event ) {
switch( event.type ) {
case todomvc.view.event.AppEvents.TOGGLE_COMPLETE_ALL:
this.sendNotification( todomvc.AppConstants.TOGGLE_TODO_STATUS, event.doToggleComplete );
break;
case todomvc.view.event.AppEvents.DELETE_ITEM:
this.sendNotification( todomvc.AppConstants.DELETE_TODO, event.todoId );
break;
case todomvc.view.event.AppEvents.ADD_ITEM:
this.sendNotification( todomvc.AppConstants.ADD_TODO, event.todo );
break;
case todomvc.view.event.AppEvents.CLEAR_COMPLETED:
this.sendNotification( todomvc.AppConstants.REMOVE_TODOS_COMPLETED );
break;
case todomvc.view.event.AppEvents.TOGGLE_COMPLETE:
case todomvc.view.event.AppEvents.UPDATE_ITEM:
this.sendNotification( todomvc.AppConstants.UPDATE_TODO, event.todo );
break;
}
},
// Handle notifications from other PureMVC actors
handleNotification: function( note ) {
switch ( note.getName() ) {
case todomvc.AppConstants.TODOS_FILTERED:
this.viewComponent.setFilteredTodoList( note.getBody() );
break;
}
},
},
// STATIC MEMBERS
{
NAME: 'TodoFormMediator'
}
);
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