Skip to content

T
todomvc
Commit 7cb4d0e7 authored by Sindre Sorhus's avatar Sindre Sorhus
Browse files
Options

index.html - head/body indentation

parent 39a16fa4
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2635 additions and 2636 deletions
architecture-examples/canjs/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="canjs">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CanJS • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</head>
<body>
<section id="todoapp">
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Written by <a href="http://bitovi.com">Bitovi</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/canjs/can.jquery.js"></script>
<script src="bower_components/canjs-localstorage/can.localstorage.js"></script>
<script src="js/lib/can.mustache.min.js"></script>
<script src="js/models/todo.js"></script>
<script src="js/todos/todos.js"></script>
<script src="js/app.js"></script>
</body>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CanJS • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</head>
<body>
<section id="todoapp">
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Written by <a href="http://bitovi.com">Bitovi</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/canjs/can.jquery.js"></script>
<script src="bower_components/canjs-localstorage/can.localstorage.js"></script>
<script src="js/lib/can.mustache.min.js"></script>
<script src="js/models/todo.js"></script>
<script src="js/todos/todos.js"></script>
<script src="js/app.js"></script>
</body>
</html>
architecture-examples/closure/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="closure">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Closure • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</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">
<title>Closure • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</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">
<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>
</footer>
</section>
<footer id="footer">
<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>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://www.scottlogic.co.uk/blog/chris/">Chris Price</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://www.scottlogic.co.uk/blog/chris/">Chris Price</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="bower_components/todomvc-common/base.js"></script>
<!-- The compiled version (to update run java -jar build/plovr.jar build plovr.json > js/compiled.js) -->
<script type="text/javascript" src="js/compiled.js"></script>
<!-- The RAW development version (to serve the files run java -jar build/plovr.jar serve plovr.json) -->
<!-- <script type="text/javascript" src="http://localhost:9810/compile?id=todomvc&mode=RAW"></script> -->
<!-- The COMPILED development version (to serve the files run java -jar build/plovr.jar serve plovr.json) -->
<!-- <script type="text/javascript" src="http://localhost:9810/compile?id=todomvc&mode=ADVANCED"></script> -->
</body>
<script src="bower_components/todomvc-common/base.js"></script>
<!-- The compiled version (to update run java -jar build/plovr.jar build plovr.json > js/compiled.js) -->
<script type="text/javascript" src="js/compiled.js"></script>
<!-- The RAW development version (to serve the files run java -jar build/plovr.jar serve plovr.json) -->
<!-- <script type="text/javascript" src="http://localhost:9810/compile?id=todomvc&mode=RAW"></script> -->
<!-- The COMPILED development version (to serve the files run java -jar build/plovr.jar serve plovr.json) -->
<!-- <script type="text/javascript" src="http://localhost:9810/compile?id=todomvc&mode=ADVANCED"></script> -->
</body>
</html>
architecture-examples/dart/web/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="dart">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dart • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</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">
<title>Dart • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</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>
<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">Clear completed</button>
</footer>
</section>
<footer id="footer">
<span id="todo-count"><strong>0</strong> item 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">Clear completed</button>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://mlorber.net">Mathieu Lorber</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://mlorber.net">Mathieu Lorber</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="bower_components/todomvc-common/base.js"></script>
<script type="application/dart" src="dart/app.dart"></script>
<script src="sdk/dart.js"></script>
</body>
<script src="bower_components/todomvc-common/base.js"></script>
<script type="application/dart" src="dart/app.dart"></script>
<script src="sdk/dart.js"></script>
</body>
</html>
architecture-examples/dojo/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="dojo">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dojo • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<section id="todoapp" data-dojo-type="todo/app18"></section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://jamesthom.as/">James Thomas</a> and <a href="https://github.com/edchat">Ed Chatelain</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dojo • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<section id="todoapp" data-dojo-type="todo/app18"></section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://jamesthom.as/">James Thomas</a> and <a href="https://github.com/edchat">Ed Chatelain</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="bower_components/todomvc-common/base.js"></script>
<script>
require = {
async: true,
parseOnLoad: true,
locale: 'en',
paths: {
dijit: '../dijit-1.8'
},
deps: ['dojo/parser', 'dojo/domReady!'],
mvc: { debugBindings: true }
};
</script>
<script src="js/lib/dojo-1.8/dojo.js"></script>
</body>
<script src="bower_components/todomvc-common/base.js"></script>
<script>
require = {
async: true,
parseOnLoad: true,
locale: 'en',
paths: {
dijit: '../dijit-1.8'
},
deps: ['dojo/parser', 'dojo/domReady!'],
mvc: { debugBindings: true }
};
</script>
<script src="js/lib/dojo-1.8/dojo.js"></script>
</body>
</html>
architecture-examples/emberjs/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="emberjs">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ember.js • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</head>
<body>
<script type="text/x-handlebars" data-template-name="todos">
<section id="todoapp">
<header id="header">
<h1>todos</h1>
{{view Ember.TextField id="new-todo" placeholder="What needs to be done?"
valueBinding="newTitle" action="createTodo"}}
</header>
{{#if length}}
<section id="main">
<ul id="todo-list">
{{#each filteredTodos itemController="todo"}}
<li {{bindAttr class="isCompleted:completed isEditing:editing"}}>
{{#if isEditing}}
{{view Todos.EditTodoView todoBinding="this"}}
{{else}}
{{view Ember.Checkbox checkedBinding="isCompleted" class="toggle"}}
<label {{action "editTodo" on="doubleClick"}}>{{title}}</label>
<button {{action "removeTodo"}} class="destroy"></button>
{{/if}}
</li>
{{/each}}
</ul>
{{view Ember.Checkbox id="toggle-all" checkedBinding="allAreDone"}}
</section>
<footer id="footer">
<span id="todo-count">{{{remainingFormatted}}}</span>
<ul id="filters">
<li>
{{#linkTo todos.index activeClass="selected"}}All{{/linkTo}}
</li>
<li>
{{#linkTo todos.active activeClass="selected"}}Active{{/linkTo}}
</li>
<li>
{{#linkTo todos.completed activeClass="selected"}}Completed{{/linkTo}}
</li>
</ul>
{{#if hasCompleted}}
<button id="clear-completed" {{action "clearCompleted"}} {{bindAttr class="buttonClass:hidden"}}>
Clear completed ({{completed}})
</button>
{{/if}}
</footer>
{{/if}}
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>
Created by
<a href="http://github.com/tomdale">Tom Dale</a>,
<a href="http://github.com/addyosmani">Addy Osmani</a>
</p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
</script>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/handlebars/handlebars.js"></script>
<script src="bower_components/ember/ember.js"></script>
<!-- TODO: change out with a component when a built one is available on Bower -->
<script src="js/libs/ember-data.js"></script>
<script src="bower_components/ember-localstorage-adapter/localstorage_adapter.js"></script>
<script src="js/app.js"></script>
<script src="js/router.js"></script>
<script src="js/models/todo.js"></script>
<script src="js/models/store.js"></script>
<script src="js/controllers/todos_controller.js"></script>
<script src="js/controllers/todo_controller.js"></script>
<script src="js/views/edit_todo_view.js"></script>
</body>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ember.js • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</head>
<body>
<script type="text/x-handlebars" data-template-name="todos">
<section id="todoapp">
<header id="header">
<h1>todos</h1>
{{view Ember.TextField id="new-todo" placeholder="What needs to be done?"
valueBinding="newTitle" action="createTodo"}}
</header>
{{#if length}}
<section id="main">
<ul id="todo-list">
{{#each filteredTodos itemController="todo"}}
<li {{bindAttr class="isCompleted:completed isEditing:editing"}}>
{{#if isEditing}}
{{view Todos.EditTodoView todoBinding="this"}}
{{else}}
{{view Ember.Checkbox checkedBinding="isCompleted" class="toggle"}}
<label {{action "editTodo" on="doubleClick"}}>{{title}}</label>
<button {{action "removeTodo"}} class="destroy"></button>
{{/if}}
</li>
{{/each}}
</ul>
{{view Ember.Checkbox id="toggle-all" checkedBinding="allAreDone"}}
</section>
<footer id="footer">
<span id="todo-count">{{{remainingFormatted}}}</span>
<ul id="filters">
<li>
{{#linkTo todos.index activeClass="selected"}}All{{/linkTo}}
</li>
<li>
{{#linkTo todos.active activeClass="selected"}}Active{{/linkTo}}
</li>
<li>
{{#linkTo todos.completed activeClass="selected"}}Completed{{/linkTo}}
</li>
</ul>
{{#if hasCompleted}}
<button id="clear-completed" {{action "clearCompleted"}} {{bindAttr class="buttonClass:hidden"}}>
Clear completed ({{completed}})
</button>
{{/if}}
</footer>
{{/if}}
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>
Created by
<a href="http://github.com/tomdale">Tom Dale</a>,
<a href="http://github.com/addyosmani">Addy Osmani</a>
</p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
</script>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/handlebars/handlebars.js"></script>
<script src="bower_components/ember/ember.js"></script>
<!-- TODO: change out with a component when a built one is available on Bower -->
<script src="js/libs/ember-data.js"></script>
<script src="bower_components/ember-localstorage-adapter/localstorage_adapter.js"></script>
<script src="js/app.js"></script>
<script src="js/router.js"></script>
<script src="js/models/todo.js"></script>
<script src="js/models/store.js"></script>
<script src="js/controllers/todos_controller.js"></script>
<script src="js/controllers/todo_controller.js"></script>
<script src="js/views/edit_todo_view.js"></script>
</body>
</html>
architecture-examples/gwt/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="gwt">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Google Web Toolkit • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="gwttodo/gwttodo.nocache.js"></script>
</body>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Google Web Toolkit • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="gwttodo/gwttodo.nocache.js"></script>
</body>
</html>
architecture-examples/jquery/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="jquery">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jQuery • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<link rel="stylesheet" href="css/app.css">
</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">
<title>jQuery • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<link rel="stylesheet" href="css/app.css">
</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="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/handlebars/handlebars.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="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/handlebars/handlebars.js"></script>
<script src="js/app.js"></script>
</body>
</html>
architecture-examples/knockback/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="knockback">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Knockback.js • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</head>
<body>
<section id="todoapp" kb-inject="AppViewModel">
<header id="header">
<h1>todos</h1>
<input id="new-todo" type="text" data-bind="value: title, valueUpdate: 'afterkeydown', event: {keyup: onAddTodo}" placeholder="What needs to be done?" autofocus>
</header>
<section id="main" data-bind="block: tasks_exist">
<input id="toggle-all" type="checkbox" data-bind="checked: all_completed">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list" data-bind="foreach: todos">
<li data-bind="css: {completed: completed, editing: editing}">
<div class="view" data-bind="event: {dblclick: onCheckEditBegin}">
<input class="toggle" type="checkbox" data-bind="checked: completed" checked>
<label data-bind="text: title"></label>
<button class="destroy" data-bind="click: onDestroyTodo"></button>
</div>
<input class="edit" type="text" data-bind="value: title, selectAndFocus: editing, event: {blur: onCheckEditEnd, keyup: onCheckEditEnd}">
</li>
</ul>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Knockback.js • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</head>
<body>
<section id="todoapp" kb-inject="AppViewModel">
<header id="header">
<h1>todos</h1>
<input id="new-todo" type="text" data-bind="value: title, valueUpdate: 'afterkeydown', event: {keyup: onAddTodo}" placeholder="What needs to be done?" autofocus>
</header>
<section id="main" data-bind="block: tasks_exist">
<input id="toggle-all" type="checkbox" data-bind="checked: all_completed">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list" data-bind="foreach: todos">
<li data-bind="css: {completed: completed, editing: editing}">
<div class="view" data-bind="event: {dblclick: onCheckEditBegin}">
<input class="toggle" type="checkbox" data-bind="checked: completed" checked>
<label data-bind="text: title"></label>
<button class="destroy" data-bind="click: onDestroyTodo"></button>
</div>
<input class="edit" type="text" data-bind="value: title, selectAndFocus: editing, event: {blur: onCheckEditEnd, keyup: onCheckEditEnd}">
</li>
</ul>
</section>
<footer id="footer" data-bind="block: tasks_exist">
<span id="todo-count" data-bind="html: loc.remaining_message"></span>
<ul id="filters">
<li>
<a href="#/" data-bind="css: {selected: list_filter_mode()==''}">All</a>
</li>
<li>
<a href="#/active" data-bind="css: {selected: list_filter_mode()=='active'}">Active</a>
</li>
<li>
<a href="#/completed" data-bind="css: {selected: list_filter_mode()=='completed'}">Completed</a>
</li>
</ul>
<button id="clear-completed" data-bind="text: loc.clear_message, block: loc.clear_message, click: onDestroyCompleted"></button>
</footer>
</section>
<footer id="footer" data-bind="block: tasks_exist">
<span id="todo-count" data-bind="html: loc.remaining_message"></span>
<ul id="filters">
<li>
<a href="#/" data-bind="css: {selected: list_filter_mode()==''}">All</a>
</li>
<li>
<a href="#/active" data-bind="css: {selected: list_filter_mode()=='active'}">Active</a>
</li>
<li>
<a href="#/completed" data-bind="css: {selected: list_filter_mode()=='completed'}">Completed</a>
</li>
</ul>
<button id="clear-completed" data-bind="text: loc.clear_message, block: loc.clear_message, click: onDestroyCompleted"></button>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="https://github.com/kmalakoff">Kevin Malakoff</a>. <br/>
Please try out the <a href="http://kmalakoff.github.com/knockback-todos-app/">enhanced version</a> <br/>
with localization, priority colors, and lazy loading <br/>
to see just how dynamic <a href="https://github.com/kmalakoff/knockback">Knockback.js</a> can be!</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="https://github.com/kmalakoff">Kevin Malakoff</a>. <br/>
Please try out the <a href="http://kmalakoff.github.com/knockback-todos-app/">enhanced version</a> <br/>
with localization, priority colors, and lazy loading <br/>
to see just how dynamic <a href="https://github.com/kmalakoff/knockback">Knockback.js</a> can be!</p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<!-- App Dependencies -->
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="js/lib/knockback-full-stack-0.16.9.min.js"></script>
<script src="bower_components/Backbone.localStorage/backbone.localStorage.js"></script>
<!-- App Dependencies -->
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="js/lib/knockback-full-stack-0.16.9.min.js"></script>
<script src="bower_components/Backbone.localStorage/backbone.localStorage.js"></script>
<!-- App and Components -->
<script src="js/lib/knockout-extended-bindings.js"></script>
<script src="js/models/todo.js"></script>
<script src="js/models/todo_collection.js"></script>
<script src="js/viewmodels/todo.js"></script>
<script src="js/viewmodels/app.js"></script>
</body>
<!-- App and Components -->
<script src="js/lib/knockout-extended-bindings.js"></script>
<script src="js/models/todo.js"></script>
<script src="js/models/todo_collection.js"></script>
<script src="js/viewmodels/todo.js"></script>
<script src="js/viewmodels/app.js"></script>
</body>
</html>
architecture-examples/knockoutjs/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="knockoutjs">
<head>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<title>Knockout.js • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</head>
<body>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input id="new-todo" data-bind="value: current, valueUpdate: 'afterkeydown', enterKey: add" placeholder="What needs to be done?" autofocus>
</header>
<section id="main" data-bind="visible: todos().length">
<input id="toggle-all" data-bind="checked: allCompleted" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list" data-bind="foreach: filteredTodos">
<li data-bind="css: { completed: completed, editing: editing }">
<div class="view">
<input class="toggle" data-bind="checked: completed" type="checkbox">
<label data-bind="text: title, event: { dblclick: $root.editItem }"></label>
<button class="destroy" data-bind="click: $root.remove"></button>
</div>
<input class="edit" data-bind="value: title, valueUpdate: 'afterkeydown', enterKey: $root.stopEditing, selectAndFocus: editing, event: { blur: $root.stopEditing }">
</li>
</ul>
<head>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<title>Knockout.js • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</head>
<body>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input id="new-todo" data-bind="value: current, valueUpdate: 'afterkeydown', enterKey: add" placeholder="What needs to be done?" autofocus>
</header>
<section id="main" data-bind="visible: todos().length">
<input id="toggle-all" data-bind="checked: allCompleted" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list" data-bind="foreach: filteredTodos">
<li data-bind="css: { completed: completed, editing: editing }">
<div class="view">
<input class="toggle" data-bind="checked: completed" type="checkbox">
<label data-bind="text: title, event: { dblclick: $root.editItem }"></label>
<button class="destroy" data-bind="click: $root.remove"></button>
</div>
<input class="edit" data-bind="value: title, valueUpdate: 'afterkeydown', enterKey: $root.stopEditing, selectAndFocus: editing, event: { blur: $root.stopEditing }">
</li>
</ul>
</section>
<footer id="footer" data-bind="visible: completedCount() || remainingCount()">
<span id="todo-count">
<strong data-bind="text: remainingCount">0</strong>
<span data-bind="text: getLabel( remainingCount )"></span> left
</span>
<ul id="filters">
<li>
<a data-bind="css: { selected: showMode() == 'all' }" href="#/all">All</a>
</li>
<li>
<a data-bind="css: { selected: showMode() == 'active' }" href="#/active">Active</a>
</li>
<li>
<a data-bind="css: { selected: showMode() == 'completed' }" href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" data-bind="visible: completedCount, click: removeCompleted">
Clear completed (<span data-bind="text: completedCount"></span>)
</button>
</footer>
</section>
<footer id="footer" data-bind="visible: completedCount() || remainingCount()">
<span id="todo-count">
<strong data-bind="text: remainingCount">0</strong>
<span data-bind="text: getLabel( remainingCount )"></span> left
</span>
<ul id="filters">
<li>
<a data-bind="css: { selected: showMode() == 'all' }" href="#/all">All</a>
</li>
<li>
<a data-bind="css: { selected: showMode() == 'active' }" href="#/active">Active</a>
</li>
<li>
<a data-bind="css: { selected: showMode() == 'completed' }" href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" data-bind="visible: completedCount, click: removeCompleted">
Clear completed (<span data-bind="text: completedCount"></span>)
</button>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Original Knockout version from <a href="https://github.com/ashish01/knockoutjs-todos">Ashish Sharma</a></p>
<p>Rewritten to use Knockout 2.0 and standard template by <a href="http://knockmeout.net">Ryan Niemeyer</a></p>
<p>Patches/fixes for cross-browser compat: <a href="http://twitter.com/addyosmani">Addy Osmani</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>Original Knockout version from <a href="https://github.com/ashish01/knockoutjs-todos">Ashish Sharma</a></p>
<p>Rewritten to use Knockout 2.0 and standard template by <a href="http://knockmeout.net">Ryan Niemeyer</a></p>
<p>Patches/fixes for cross-browser compat: <a href="http://twitter.com/addyosmani">Addy Osmani</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/knockout.js/knockout.js"></script>
<script src="bower_components/director/build/director.js"></script>
<script src="js/app.js"></script>
</body>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/knockout.js/knockout.js"></script>
<script src="bower_components/director/build/director.js"></script>
<script src="js/app.js"></script>
</body>
</html>
architecture-examples/maria/index.html
View file @ 7cb4d0e7
<!DOCTYPE html>
<!doctype html>
<html data-framework="maria">
<head>
<meta charset="utf-8">
<title>Maria • TodoMVC</title>
<link href="bower_components/todomvc-common/base.css" rel="stylesheet">
<link href="css/app.css" rel="stylesheet">
</head>
<body>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://github.com/petermichaux">Peter Michaux</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<head>
<meta charset="utf-8">
<title>Maria • TodoMVC</title>
<link href="bower_components/todomvc-common/base.css" rel="stylesheet">
<link href="css/app.css" rel="stylesheet">
</head>
<body>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://github.com/petermichaux">Peter Michaux</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/director/build/director.js"></script>
<script src="bower_components/maria-bower/maria.js"></script>
<script src="bower_components/aristocrat-bower/aristocrat.js"></script>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/director/build/director.js"></script>
<script src="bower_components/maria-bower/maria.js"></script>
<script src="bower_components/aristocrat-bower/aristocrat.js"></script>
<script src="js/namespace.js"></script>
<script src="js/util.js"></script>
<script src="js/models/TodoModel.js"></script>
<script src="js/models/TodosModel.js"></script>
<script src="js/templates/TodosTemplate.js"></script>
<script src="js/views/TodosView.js"></script>
<script src="js/controllers/TodosController.js"></script>
<script src="js/templates/TodoTemplate.js"></script>
<script src="js/views/TodoView.js"></script>
<script src="js/controllers/TodoController.js"></script>
<script src="js/bootstrap.js"></script>
</body>
<script src="js/namespace.js"></script>
<script src="js/util.js"></script>
<script src="js/models/TodoModel.js"></script>
<script src="js/models/TodosModel.js"></script>
<script src="js/templates/TodosTemplate.js"></script>
<script src="js/views/TodosView.js"></script>
<script src="js/controllers/TodosController.js"></script>
<script src="js/templates/TodoTemplate.js"></script>
<script src="js/views/TodoView.js"></script>
<script src="js/controllers/TodoController.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
architecture-examples/spine/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="spine">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Spine.js • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</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">
<title>Spine.js • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</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> items 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">Clear completed</button>
</footer>
</section>
<footer id="footer">
<span id="todo-count"><strong>0</strong> items 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">Clear completed</button>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Inspired by the official <a href="https://github.com/maccman/spine.todos">Spine.Todos</a></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>Inspired by the official <a href="https://github.com/maccman/spine.todos">Spine.Todos</a></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 type="text/x-handlebars-template" id="todo-template">
{{#this}}
<li {{#if completed}}class="completed"{{/if}}>
<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 src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/handlebars/handlebars.js"></script>
<script src="bower_components/spine/lib/spine.js"></script>
<script src="bower_components/spine/lib/route.js"></script>
<script src="bower_components/spine/lib/local.js"></script>
<script type="text/x-handlebars-template" id="todo-template">
{{#this}}
<li {{#if completed}}class="completed"{{/if}}>
<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 src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/handlebars/handlebars.js"></script>
<script src="bower_components/spine/lib/spine.js"></script>
<script src="bower_components/spine/lib/route.js"></script>
<script src="bower_components/spine/lib/local.js"></script>
<script src="js/controllers/todos.js"></script>
<script src="js/models/todo.js"></script>
<script src="js/app.js"></script>
</body>
<script src="js/controllers/todos.js"></script>
<script src="js/models/todo.js"></script>
<script src="js/app.js"></script>
</body>
</html>
architecture-examples/yui/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="yui">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>YUI • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</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">
<title>YUI • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</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"></footer>
</section>
<footer id="footer"></footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by
<a href="https://github.com/clarle">Clarence Leung</a> and
<a href="https://twitter.com/ericf">Eric Ferraiuolo</a>
</p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="bower_components/todomvc-common/base.js"></script>
<script type="text/x-handlebars-template" id="item-template">
<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}}">
</script>
<script type="text/x-handlebars-template" id="stats-template">
<span id="todo-count"><strong>{{remaining}}</strong> {{pluralize remaining "item"}} 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>
{{#if completed}}
<button id="clear-completed">Clear completed ({{completed}})</button>
{{/if}}
</script>
<script src="../../assets/base.js"></script>
<script src="http://yui.yahooapis.com/3.11.0/build/yui/yui-min.js"></script>
<script>
YUI({
groups: {
'todo-mvc': {
base: './js/',
modules: {
'todo': {
path: 'models/todo.js'
},
'todo-list': {
path: 'models/todolist.js'
},
'todo-view': {
path: 'views/todoview.js'
},
'todo-app': {
path: 'app.js'
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by
<a href="https://github.com/clarle">Clarence Leung</a> and
<a href="https://twitter.com/ericf">Eric Ferraiuolo</a>
</p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="bower_components/todomvc-common/base.js"></script>
<script type="text/x-handlebars-template" id="item-template">
<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}}">
</script>
<script type="text/x-handlebars-template" id="stats-template">
<span id="todo-count"><strong>{{remaining}}</strong> {{pluralize remaining "item"}} 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>
{{#if completed}}
<button id="clear-completed">Clear completed ({{completed}})</button>
{{/if}}
</script>
<script src="../../assets/base.js"></script>
<script src="http://yui.yahooapis.com/3.11.0/build/yui/yui-min.js"></script>
<script>
YUI({
groups: {
'todo-mvc': {
base: './js/',
modules: {
'todo': {
path: 'models/todo.js'
},
'todo-list': {
path: 'models/todolist.js'
},
'todo-view': {
path: 'views/todoview.js'
},
'todo-app': {
path: 'app.js'
}
}
}
}
}
}).use('todo-app', function (Y) {
new Y.TodoMVC.TodoApp();
});
</script>
</body>
}).use('todo-app', function (Y) {
new Y.TodoMVC.TodoApp();
});
</script>
</body>
</html>
dependency-examples/backbone_require/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="backbonejs">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Backbone.js + RequireJS • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<script src="bower_components/todomvc-common/base.js"></script>
</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">
<title>Backbone.js + RequireJS • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<script src="bower_components/todomvc-common/base.js"></script>
</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"></footer>
</section>
<footer id="footer"></footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Written by <a href="http://addyosmani.github.com/todomvc/">Addy Osmani</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script data-main="js/main" src="bower_components/requirejs/require.js"></script>
</body>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Written by <a href="http://addyosmani.github.com/todomvc/">Addy Osmani</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script data-main="js/main" src="bower_components/requirejs/require.js"></script>
</body>
</html>
dependency-examples/flight/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="flight">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Flight • Todo</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</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">
<title>Flight • Todo</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</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"></footer>
</section>
<footer id="footer"></footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://github.com/mkuklis">Michal Kuklis</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="bower_components/todomvc-common/base.js"></script>
<script data-main="app/js/main" src="bower_components/requirejs/requirejs.js"></script>
</body>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://github.com/mkuklis">Michal Kuklis</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="bower_components/todomvc-common/base.js"></script>
<script data-main="app/js/main" src="bower_components/requirejs/requirejs.js"></script>
</body>
</html>
index.html
View file @ 7cb4d0e7
This diff is collapsed.
labs/architecture-examples/ariatemplates/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="ariatemplates">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Aria Templates • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<section id="todoapp">
</section>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Aria Templates • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<section id="todoapp">
</section>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="js/lib/aria/ariatemplates-1.3.5.js"></script>
<script>
// Update the path to the Todo module here when necessary
aria.core.DownloadMgr.updateRootMap({
js: {
'*': './'
}
});
// Here be todos
Aria.loadTemplate({
div: 'todoapp',
classpath: 'js.view.Todo',
moduleCtrl: {
classpath: 'js.TodoCtrl'
}
});
</script>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="js/lib/aria/ariatemplates-1.3.5.js"></script>
<script>
// Update the path to the Todo module here when necessary
aria.core.DownloadMgr.updateRootMap({
js: {
'*': './'
}
});
// Here be todos
Aria.loadTemplate({
div: 'todoapp',
classpath: 'js.view.Todo',
moduleCtrl: {
classpath: 'js.TodoCtrl'
}
});
</script>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Written by <a href="http://ariatemplates.com">Olaf Kappes</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
</body>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Written by <a href="http://ariatemplates.com">Olaf Kappes</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
</body>
</html>
labs/architecture-examples/backbone.xmpp/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="backbonejs">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Backbone.js • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</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">
<title>Backbone.js • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</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"></footer>
</section>
<footer id="footer"></footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Written by <a href="https://github.com/addyosmani">Addy Osmani</a></p>
<p>Adapted for
<a href="https://github.com/ggozad/Backbone.xmpp">Backbone.xmpp</a>
by <a href="https://github.com/ggozad">Yiorgis Gozadinos</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script type="text/template" id="item-template">
<div class="view">
<input class="toggle" type="checkbox" <%= completed ? 'checked' : '' %>>
<label><%- title %></label>
<button class="destroy"></button>
</div>
<input class="edit" value="<%- title %>">
</script>
<script type="text/template" id="stats-template">
<span id="todo-count"><strong><%= remaining %></strong> <%= remaining === 1 ? 'item' : 'items' %> 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>
<% if (completed) { %>
<button id="clear-completed">Clear completed (<%= completed %>)</button>
<% } %>
</script>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/lodash/lodash.js"></script>
<script src="bower_components/backbone/backbone.js"></script>
<script src="bower_components/Strophe.js/strophe.js"></script>
<script src="js/lib/strophe.forms.js"></script>
<script src="js/lib/strophe.pubsub.js"></script>
<script src="js/lib/backbone.xmpp.storage.js"></script>
<script src="js/lib/backbone.xmpp.node.js"></script>
<script src="js/models/todo.js"></script>
<script src="js/collections/todos.js"></script>
<script src="js/views/todos.js"></script>
<script src="js/views/app.js"></script>
<script src="js/routers/router.js"></script>
<script src="js/app.js"></script>
</body>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Written by <a href="https://github.com/addyosmani">Addy Osmani</a></p>
<p>Adapted for
<a href="https://github.com/ggozad/Backbone.xmpp">Backbone.xmpp</a>
by <a href="https://github.com/ggozad">Yiorgis Gozadinos</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script type="text/template" id="item-template">
<div class="view">
<input class="toggle" type="checkbox" <%= completed ? 'checked' : '' %>>
<label><%- title %></label>
<button class="destroy"></button>
</div>
<input class="edit" value="<%- title %>">
</script>
<script type="text/template" id="stats-template">
<span id="todo-count"><strong><%= remaining %></strong> <%= remaining === 1 ? 'item' : 'items' %> 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>
<% if (completed) { %>
<button id="clear-completed">Clear completed (<%= completed %>)</button>
<% } %>
</script>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/lodash/lodash.js"></script>
<script src="bower_components/backbone/backbone.js"></script>
<script src="bower_components/Strophe.js/strophe.js"></script>
<script src="js/lib/strophe.forms.js"></script>
<script src="js/lib/strophe.pubsub.js"></script>
<script src="js/lib/backbone.xmpp.storage.js"></script>
<script src="js/lib/backbone.xmpp.node.js"></script>
<script src="js/models/todo.js"></script>
<script src="js/collections/todos.js"></script>
<script src="js/views/todos.js"></script>
<script src="js/views/app.js"></script>
<script src="js/routers/router.js"></script>
<script src="js/app.js"></script>
</body>
</html>
labs/architecture-examples/backbone_marionette/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="marionettejs">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Marionette • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<section id="todoapp">
<header id="header"></header>
<section id="main"></section>
<footer id="footer"></footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>
Created by <a href="http://github.com/jsoverson">Jarrod Overson</a>
and <a href="http://github.com/derickbailey">Derick Bailey</a>
using <a href="http://marionettejs.com">Backbone.Marionette</a>
</p>
<p>Further variations on the Backbone.Marionette app are also <a href="https://github.com/marionettejs/backbone.marionette/wiki/Projects-and-websites-using-marionette">available</a>.</p>
</footer>
<script type="text/html" id="template-footer">
<span id="todo-count">
<strong><%= activeCount %></strong> <%= activeCountLabel() %>
</span>
<ul id="filters">
<li>
<a href="#">All</a>
</li>
<li>
<a href="#active">Active</a>
</li>
<li>
<a href="#completed">Completed</a>
</li>
</ul>
<button id="clear-completed" <% if (!completedCount) { %>class="hidden"<% } %>>
Clear completed (<%= completedCount %>)
</button>
</script>
<script type="text/html" id="template-header">
<h1>todos</h1>
<input id="new-todo" placeholder="What needs to be done?" autofocus>
</script>
<script type="text/html" id="template-todoItemView">
<div class="view">
<input class="toggle" type="checkbox" <% if (completed) { %>checked<% } %>>
<label><%- title %></label>
<button class="destroy"></button>
</div>
<input class="edit" value="<%- title %>">
</script>
<script type="text/html" id="template-todoListCompositeView">
<input id="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list"></ul>
</script>
<!-- vendor libraries -->
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/backbone/backbone.js"></script>
<script src="bower_components/backbone.localStorage/backbone.localStorage.js"></script>
<script src="bower_components/backbone.marionette/lib/backbone.marionette.js"></script>
<!-- application -->
<script src="js/TodoMVC.js"></script>
<script src="js/TodoMVC.Todos.js"></script>
<script src="js/TodoMVC.Layout.js"></script>
<script src="js/TodoMVC.TodoList.Views.js"></script>
<script src="js/TodoMVC.TodoList.js"></script>
<script>
$(function () {
// start the TodoMVC app (defined in js/TodoMVC.js)
TodoMVC.start();
});
</script>
</body>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Marionette • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<section id="todoapp">
<header id="header"></header>
<section id="main"></section>
<footer id="footer"></footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>
Created by <a href="http://github.com/jsoverson">Jarrod Overson</a>
and <a href="http://github.com/derickbailey">Derick Bailey</a>
using <a href="http://marionettejs.com">Backbone.Marionette</a>
</p>
<p>Further variations on the Backbone.Marionette app are also <a href="https://github.com/marionettejs/backbone.marionette/wiki/Projects-and-websites-using-marionette">available</a>.</p>
</footer>
<script type="text/html" id="template-footer">
<span id="todo-count">
<strong><%= activeCount %></strong> <%= activeCountLabel() %>
</span>
<ul id="filters">
<li>
<a href="#">All</a>
</li>
<li>
<a href="#active">Active</a>
</li>
<li>
<a href="#completed">Completed</a>
</li>
</ul>
<button id="clear-completed" <% if (!completedCount) { %>class="hidden"<% } %>>
Clear completed (<%= completedCount %>)
</button>
</script>
<script type="text/html" id="template-header">
<h1>todos</h1>
<input id="new-todo" placeholder="What needs to be done?" autofocus>
</script>
<script type="text/html" id="template-todoItemView">
<div class="view">
<input class="toggle" type="checkbox" <% if (completed) { %>checked<% } %>>
<label><%- title %></label>
<button class="destroy"></button>
</div>
<input class="edit" value="<%- title %>">
</script>
<script type="text/html" id="template-todoListCompositeView">
<input id="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list"></ul>
</script>
<!-- vendor libraries -->
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/backbone/backbone.js"></script>
<script src="bower_components/backbone.localStorage/backbone.localStorage.js"></script>
<script src="bower_components/backbone.marionette/lib/backbone.marionette.js"></script>
<!-- application -->
<script src="js/TodoMVC.js"></script>
<script src="js/TodoMVC.Todos.js"></script>
<script src="js/TodoMVC.Layout.js"></script>
<script src="js/TodoMVC.TodoList.Views.js"></script>
<script src="js/TodoMVC.TodoList.js"></script>
<script>
$(function () {
// start the TodoMVC app (defined in js/TodoMVC.js)
TodoMVC.start();
});
</script>
</body>
</html>
labs/architecture-examples/batman/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="batman">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Batman • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</head>
<body>
<div data-yield="main"></div>
<div data-defineview="todos/all">
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<form data-formfor-todo="newTodo" data-event-submit="createTodo">
<input id="new-todo" type="text" placeholder="What needs to be completed?" autofocus data-bind="todo.title">
</form>
</header>
<section id="main" class="hidden" data-removeclass-hidden="Todo.all.length">
<input id="toggle-all" type="checkbox" data-event-change="toggleAll" data-source="Todo.completed.length | equals Todo.all.length">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<li data-foreach-todo="currentTodos"
data-addclass-completed="todo.completed"
data-addclass-editing="todo.editing" >
<div class="view" data-hideif="todo.editing">
<input class="toggle" type="checkbox" data-bind="todo.completed" data-event-change="todoDoneChanged">
<label data-bind="todo.title" data-event-doubleclick="toggleEditing"></label>
<button class="destroy" data-event-click="destroyTodo"></button>
</div>
<input class="edit" type="text"
data-bind="todo.title"
data-bind-id="'todo-input-' | append todo.id"
data-event-blur="toggleEditing"
data-event-keypress="disableEditingUponSubmit">
</li>
</ul>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Batman • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</head>
<body>
<div data-yield="main"></div>
<div data-defineview="todos/all">
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<form data-formfor-todo="newTodo" data-event-submit="createTodo">
<input id="new-todo" type="text" placeholder="What needs to be completed?" autofocus data-bind="todo.title">
</form>
</header>
<section id="main" class="hidden" data-removeclass-hidden="Todo.all.length">
<input id="toggle-all" type="checkbox" data-event-change="toggleAll" data-source="Todo.completed.length | equals Todo.all.length">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<li data-foreach-todo="currentTodos"
data-addclass-completed="todo.completed"
data-addclass-editing="todo.editing" >
<div class="view" data-hideif="todo.editing">
<input class="toggle" type="checkbox" data-bind="todo.completed" data-event-change="todoDoneChanged">
<label data-bind="todo.title" data-event-doubleclick="toggleEditing"></label>
<button class="destroy" data-event-click="destroyTodo"></button>
</div>
<input class="edit" type="text"
data-bind="todo.title"
data-bind-id="'todo-input-' | append todo.id"
data-event-blur="toggleEditing"
data-event-keypress="disableEditingUponSubmit">
</li>
</ul>
</section>
<footer id="footer" class="hidden" data-removeclass-hidden="Todo.all.length">
<span id="todo-count">
<strong data-bind="Todo.active.length"></strong>
<span data-bind="'item' | pluralize Todo.active.length, false"></span> left
</span>
<ul id="filters">
<li>
<a data-addclass-selected="currentRoute.action | equals 'all'" data-route="'/'">All</a>
</li>
<li>
<a data-addclass-selected="currentRoute.action | equals 'active'" data-route="'/active'">Active</a>
</li>
<li>
<a data-addclass-selected="currentRoute.action | equals 'completed'" data-route="'/completed'">Completed</a>
</li>
</ul>
<button id="clear-completed" data-event-click="clearCompleted" data-showif="Todo.completed.length">
Clear completed (<span data-bind="Todo.completed.length"></span>)
</button>
</footer>
</section>
<footer id="footer" class="hidden" data-removeclass-hidden="Todo.all.length">
<span id="todo-count">
<strong data-bind="Todo.active.length"></strong>
<span data-bind="'item' | pluralize Todo.active.length, false"></span> left
</span>
<ul id="filters">
<li>
<a data-addclass-selected="currentRoute.action | equals 'all'" data-route="'/'">All</a>
</li>
<li>
<a data-addclass-selected="currentRoute.action | equals 'active'" data-route="'/active'">Active</a>
</li>
<li>
<a data-addclass-selected="currentRoute.action | equals 'completed'" data-route="'/completed'">Completed</a>
</li>
</ul>
<button id="clear-completed" data-event-click="clearCompleted" data-showif="Todo.completed.length">
Clear completed (<span data-bind="Todo.completed.length"></span>)
</button>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://batmanjs.org">Harry Brundage</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://batmanjs.org">Harry Brundage</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
</div>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/batman/lib/dist/batman.js"></script>
<script src="app.js"></script>
</body>
</div>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/batman/lib/dist/batman.js"></script>
<script src="app.js"></script>
</body>
</html>
labs/architecture-examples/cujo/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="cujo">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>cujo • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</head>
<body>
<section id="todoapp"></section>
<script src="bower_components/todomvc-common/base.js"></script>
<script data-curl-run="app/run" src="bower_components/curl/src/curl.js"></script>
</body>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>cujo • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</head>
<body>
<section id="todoapp"></section>
<script src="bower_components/todomvc-common/base.js"></script>
<script data-curl-run="app/run" src="bower_components/curl/src/curl.js"></script>
</body>
</html>
labs/architecture-examples/dermis/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="dermis">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dermis • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</head>
<body>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input id="new-todo" placeholder="What needs to be done?" autofocus>
</header>
<div id="content">
<section id="main" data-show=". | length | overZero">
<input id="toggle-all" type="checkbox" data-on-click=":toggle" data-checked=":allCompleted < . .child" data-show=":all < . | length | overZero">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<li data-each-todo=":todos < . .mode" data-class-completed="todo.completed" data-class-editing="todo.editable">
<div class="view">
<input class="toggle" type="checkbox" data-checked="todo.completed">
<label data-text="todo.title" data-on-dblclick="todo:setEditable"></label>
<button class="destroy" data-on-click="todo:destroy"></button>
</div>
<input class="edit" data-value="todo.title" data-on-blur="todo:save" data-on-change="todo:save">
</li>
</ul>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dermis • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</head>
<body>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input id="new-todo" placeholder="What needs to be done?" autofocus>
</header>
<div id="content">
<section id="main" data-show=". | length | overZero">
<input id="toggle-all" type="checkbox" data-on-click=":toggle" data-checked=":allCompleted < . .child" data-show=":all < . | length | overZero">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<li data-each-todo=":todos < . .mode" data-class-completed="todo.completed" data-class-editing="todo.editable">
<div class="view">
<input class="toggle" type="checkbox" data-checked="todo.completed">
<label data-text="todo.title" data-on-dblclick="todo:setEditable"></label>
<button class="destroy" data-on-click="todo:destroy"></button>
</div>
<input class="edit" data-value="todo.title" data-on-blur="todo:save" data-on-change="todo:save">
</li>
</ul>
</section>
<footer id="footer" data-show=":all < . .child | length | overZero">
<span id="todo-count">
<strong data-text=":active < . .child | length"></strong>
item<span data-show=":active < . .child | length | plural">s</span> left
</span>
<ul id="filters">
<li>
<a href="#/">All</a>
</li>
<li>
<a href="#/active">Active</a>
</li>
<li>
<a href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" data-on-click=":clear" data-show=":completed < . .child | length | overZero">Clear completed (<span data-text=":completed < . .child | length"></span>)
</button>
</footer>
</section>
<footer id="footer" data-show=":all < . .child | length | overZero">
<span id="todo-count">
<strong data-text=":active < . .child | length"></strong>
item<span data-show=":active < . .child | length | plural">s</span> left
</span>
<ul id="filters">
<li>
<a href="#/">All</a>
</li>
<li>
<a href="#/active">Active</a>
</li>
<li>
<a href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" data-on-click=":clear" data-show=":completed < . .child | length | overZero">Clear completed (<span data-text=":completed < . .child | length"></span>)
</button>
</footer>
</section>
</div>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://github.com/Contra">Contra</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
</div>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://github.com/Contra">Contra</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/requirejs/require.js"></script>
<script src="js/lib/dermis.js"></script>
<script src="js/app.js"></script>
</body>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/requirejs/require.js"></script>
<script src="js/lib/dermis.js"></script>
<script src="js/app.js"></script>
</body>
</html>
labs/architecture-examples/dijon/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="dijon">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dijon • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</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">
<title>Dijon • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</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>Based on app by <a href="http://github.com/sindresorhus">Sindre Sorhus</a></p>
<p>Created by <a href="http://www.creynders.be">Camille Reynders</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>Based on app by <a href="http://github.com/sindresorhus">Sindre Sorhus</a></p>
<p>Created by <a href="http://www.creynders.be">Camille Reynders</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script type="text/x-handlebars-template" id="todo-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 src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/handlebars.js/handlebars.js"></script>
<script src="js/lib/dijon-0.5.3.min.js"></script>
<script src="js/config.js"></script>
<script src="js/models/TodosModel.js"></script>
<script src="js/services/LocalStorageService.js"></script>
<script src="js/utils/Utils.js"></script>
<script src="js/views/FooterView.js"></script>
<script src="js/views/TodoFormView.js"></script>
<script src="js/views/TodoListView.js"></script>
<script src="js/app.js"></script>
</body>
<script type="text/x-handlebars-template" id="todo-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 src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/handlebars.js/handlebars.js"></script>
<script src="js/lib/dijon-0.5.3.min.js"></script>
<script src="js/config.js"></script>
<script src="js/models/TodosModel.js"></script>
<script src="js/services/LocalStorageService.js"></script>
<script src="js/utils/Utils.js"></script>
<script src="js/views/FooterView.js"></script>
<script src="js/views/TodoFormView.js"></script>
<script src="js/views/TodoListView.js"></script>
<script src="js/app.js"></script>
</body>
</html>
labs/architecture-examples/duel/www/index.html
View file @ 7cb4d0e7
<!DOCTYPE html>
<html lang="en" data-framework="duel">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>DUEL &#x2022; TodoMVC</title>
<link rel="stylesheet" href="./cdn/d764469b1882372019d07f8c1174b1d64507e56d.css" />
</head>
<body>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Ported to <a href="http://duelengine.org">DUEL</a> by <a href="http://mck.me">Stephen McKamey</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="./cdn/4340176df828f72a94b201a48c223860b95908dc.js"></script>
</body>
</html>
\ No newline at end of file
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>DUEL &#x2022; TodoMVC</title>
<link rel="stylesheet" href="./cdn/d764469b1882372019d07f8c1174b1d64507e56d.css" />
</head>
<body>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Ported to <a href="http://duelengine.org">DUEL</a> by <a href="http://mck.me">Stephen McKamey</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="./cdn/4340176df828f72a94b201a48c223860b95908dc.js"></script>
</body>
</html>
labs/architecture-examples/epitome/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="epitome">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Epitome • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</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">
<title>Epitome • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</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"></footer>
</section>
<footer id="footer"></footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="https://github.com/DimitarChristoff/">Dimitar Christoff</a></p>
<p>Powered by <a href="http://epitome-mvc.github.io/Epitome">Epitome for MooTools</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script type="text/template" id="item-template">
<div class="view">
<input class="toggle" type="checkbox" <%=completedCheckbox%>>
<label><%-title%></label>
<button class="destroy"></button>
</div>
<input class="edit" value="<%=title%>">
</script>
<script type="text/template" id="stats-template">
<span id="todo-count">
<strong><%=remaining%></strong> item<% if (obj.remaining !== 1) { %>s<% } %> 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>
<% if (completed) { %>
<button id="clear-completed">Clear completed (<%=completed%>)</button>
<% } %>
</script>
<script src="bower_components/todomvc-common/base.js"></script>
<!-- mootools -->
<script src="js/lib/mootools-yui-compressed.js"></script>
<!-- epitome pre-compiled -->
<script src="bower_components/Epitome/Epitome-min.js"></script>
<!-- todo app -->
<script src="js/models/todo-model.js"></script>
<script src="js/collections/todo-collection.js"></script>
<script src="js/views/todo-list.js"></script>
<script src="js/views/todo-main.js"></script>
<script src="js/controllers/todo-router.js"></script>
<script src="js/app.js"></script>
</body>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="https://github.com/DimitarChristoff/">Dimitar Christoff</a></p>
<p>Powered by <a href="http://epitome-mvc.github.io/Epitome">Epitome for MooTools</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script type="text/template" id="item-template">
<div class="view">
<input class="toggle" type="checkbox" <%=completedCheckbox%>>
<label><%-title%></label>
<button class="destroy"></button>
</div>
<input class="edit" value="<%=title%>">
</script>
<script type="text/template" id="stats-template">
<span id="todo-count">
<strong><%=remaining%></strong> item<% if (obj.remaining !== 1) { %>s<% } %> 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>
<% if (completed) { %>
<button id="clear-completed">Clear completed (<%=completed%>)</button>
<% } %>
</script>
<script src="bower_components/todomvc-common/base.js"></script>
<!-- mootools -->
<script src="js/lib/mootools-yui-compressed.js"></script>
<!-- epitome pre-compiled -->
<script src="bower_components/Epitome/Epitome-min.js"></script>
<!-- todo app -->
<script src="js/models/todo-model.js"></script>
<script src="js/collections/todo-collection.js"></script>
<script src="js/views/todo-list.js"></script>
<script src="js/views/todo-main.js"></script>
<script src="js/controllers/todo-router.js"></script>
<script src="js/app.js"></script>
</body>
</html>
labs/architecture-examples/extjs/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ExtJS • TodoMVC</title>
<!-- <link rel="stylesheet" href="bower_components/todomvc-common/base.css"> -->
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div id="todoapp">
<header>
<h1>todos</h1>
<input id="new-todo" type="text" placeholder="What needs to be done?">
</header>
<section id="main"></section>
</div>
<div id="instructions">
Double-click to edit a todo
</div>
<div id="credits">
Created by <a href="http://revolunet.com/">Revolunet</a><br />
Updates by <a href="http://github.com/boushley">Aaron Boushley</a>
</div>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="http://cdn.sencha.com/ext-4.1.1-gpl/bootstrap.js"></script>
<script src="js/app.js"></script>
</body>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ExtJS • TodoMVC</title>
<!-- <link rel="stylesheet" href="bower_components/todomvc-common/base.css"> -->
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div id="todoapp">
<header>
<h1>todos</h1>
<input id="new-todo" type="text" placeholder="What needs to be done?">
</header>
<section id="main"></section>
</div>
<div id="instructions">
Double-click to edit a todo
</div>
<div id="credits">
Created by <a href="http://revolunet.com/">Revolunet</a><br />
Updates by <a href="http://github.com/boushley">Aaron Boushley</a>
</div>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="http://cdn.sencha.com/ext-4.1.1-gpl/bootstrap.js"></script>
<script src="js/app.js"></script>
</body>
</html>
labs/architecture-examples/extjs_deftjs/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="deftjs">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ExtJS with DeftJS • TodoMVC</title>
<!-- CSS -->
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<script src="bower_components/todomvc-common/base.js"></script>
<!-- ExtJS -->
<script src="lib/extjs/ext-all.js"></script>
<!-- Application -->
<script src="js/app-loader.js"></script>
<script src="lib/deft/deft.js"></script>
<script src="js/app.js"></script>
</body>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ExtJS with DeftJS • TodoMVC</title>
<!-- CSS -->
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<script src="bower_components/todomvc-common/base.js"></script>
<!-- ExtJS -->
<script src="lib/extjs/ext-all.js"></script>
<!-- Application -->
<script src="js/app-loader.js"></script>
<script src="lib/deft/deft.js"></script>
<script src="js/app.js"></script>
</body>
</html>
labs/architecture-examples/kendo/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="kendo">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Kendo UI • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</head>
<body>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input id="new-todo" data-bind="enter: saveTodo"
placeholder="What needs to be done?" autofocus>
</header>
<section id="main" data-bind="visible: isVisible">
<input id="toggle-all" type="checkbox" data-bind="click: toggleAll, checked: allCompleted">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list" data-role="listview" data-template="item-template" data-bind="source: todos"></ul>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Kendo UI • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</head>
<body>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input id="new-todo" data-bind="enter: saveTodo"
placeholder="What needs to be done?" autofocus>
</header>
<section id="main" data-bind="visible: isVisible">
<input id="toggle-all" type="checkbox" data-bind="click: toggleAll, checked: allCompleted">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list" data-role="listview" data-template="item-template" data-bind="source: todos"></ul>
</section>
<footer id="footer" data-bind="visible: isVisible">
<span id="todo-count">
<strong data-bind="text: activeCount"></strong>
<span data-bind="text: activeCountText"></span> left
</span>
<ul id="filters">
<li>
<a href="#/" data-bind="attr: { class: allFilterClass }">All</a>
</li>
<li>
<a href="#/active" data-bind="attr: { class: activeFilterClass }">Active</a>
</li>
<li>
<a href="#/completed" data-bind="attr: { class: completedFilterClass }">Completed</a>
</li>
</ul>
<button id="clear-completed"
data-bind="click: destroyCompleted,
visible: completedCount,
text: clearCompletedText">
</button>
</footer>
</section>
<footer id="footer" data-bind="visible: isVisible">
<span id="todo-count">
<strong data-bind="text: activeCount"></strong>
<span data-bind="text: activeCountText"></span> left
</span>
<ul id="filters">
<li>
<a href="#/" data-bind="attr: { class: allFilterClass }">All</a>
<div id="info">
<p>Double-click to edit a todo</p>
<p>Credits <a href="https://github.com/bsatrom">Brandon Satrom</a>, <a href="https://github.com/burkeholland">Burke Holland</a> &amp; <a href="https://github.com/akorchev">Atanas Korchev</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</div>
<script type="text/template" id="item-template">
<li data-bind="attr: { class: todoItemClass }">
<div class="view">
<input class="toggle" type="checkbox" data-bind="checked: completed, events: { change: sync }">
<label data-bind="text: title, events: { dblclick: startEdit } "></label>
<button class="destroy" data-bind="click: destroy">
</button>
</div>
<input class="edit" data-bind="value: title, events: { change: endEdit, blur: endEdit }, enter: endEdit">
</li>
<li>
<a href="#/active" data-bind="attr: { class: activeFilterClass }">Active</a>
</li>
<li>
<a href="#/completed" data-bind="attr: { class: completedFilterClass }">Completed</a>
</li>
</ul>
<button id="clear-completed"
data-bind="click: destroyCompleted,
visible: completedCount,
text: clearCompletedText">
</button>
</footer>
</section>
<div id="info">
<p>Double-click to edit a todo</p>
<p>Credits <a href="https://github.com/bsatrom">Brandon Satrom</a>, <a href="https://github.com/burkeholland">Burke Holland</a> &amp; <a href="https://github.com/akorchev">Atanas Korchev</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</div>
<script type="text/template" id="item-template">
<li data-bind="attr: { class: todoItemClass }">
<div class="view">
<input class="toggle" type="checkbox" data-bind="checked: completed, events: { change: sync }">
<label data-bind="text: title, events: { dblclick: startEdit } "></label>
<button class="destroy" data-bind="click: destroy">
</button>
</div>
<input class="edit" data-bind="value: title, events: { change: endEdit, blur: endEdit }, enter: endEdit">
</li>
</script>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="js/lib/kendo.web.js"></script>
<script src="js/lib/kendo.bindings.custom.js"></script>
<script src="js/lib/kendo.data.localstoragedatasource.js"></script>
<script src="js/app.js"></script>
</body>
</script>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="js/lib/kendo.web.js"></script>
<script src="js/lib/kendo.bindings.custom.js"></script>
<script src="js/lib/kendo.data.localstoragedatasource.js"></script>
<script src="js/app.js"></script>
</body>
</html>
labs/architecture-examples/knockoutjs_classBindingProvider/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="knockoutjs">
<head>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<title>Knockout.js • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</head>
<body>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input id="new-todo" data-class="todos.new" placeholder="What needs to be done?" autofocus>
</header>
<section id="main" data-class="todos.listVisible">
<input id="toggle-all" data-class="todos.allCompleted" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list" data-class="todos.foreach">
<li data-class="todos.todo.item">
<div class="view">
<input class="toggle" data-class="todos.todo.completed" type="checkbox">
<label data-class="todos.todo.readOnlyValue"></label>
<button class="destroy" data-class="todos.todo.destroy"></button>
</div>
<input class="edit" data-class="todos.todo.editingValue">
</li>
</ul>
<head>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<title>Knockout.js • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</head>
<body>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input id="new-todo" data-class="todos.new" placeholder="What needs to be done?" autofocus>
</header>
<section id="main" data-class="todos.listVisible">
<input id="toggle-all" data-class="todos.allCompleted" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list" data-class="todos.foreach">
<li data-class="todos.todo.item">
<div class="view">
<input class="toggle" data-class="todos.todo.completed" type="checkbox">
<label data-class="todos.todo.readOnlyValue"></label>
<button class="destroy" data-class="todos.todo.destroy"></button>
</div>
<input class="edit" data-class="todos.todo.editingValue">
</li>
</ul>
</section>
<footer id="footer" data-class="footer.isVisible">
<span id="todo-count">
<strong data-class="footer.remainingCount">0</strong>
<span data-class="footer.remainingCountText"></span> left
</span>
<ul id="filters">
<li>
<a data-class="footer.filters.all" href="#/all">All</a>
</li>
<li>
<a data-class="footer.filters.active" href="#/active">Active</a>
</li>
<li>
<a data-class="footer.filters.completed" href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" data-class="footer.clearCompleted">
Clear completed (<span data-class="footer.completedCount"></span>)
</button>
</footer>
</section>
<footer id="footer" data-class="footer.isVisible">
<span id="todo-count">
<strong data-class="footer.remainingCount">0</strong>
<span data-class="footer.remainingCountText"></span> left
</span>
<ul id="filters">
<li>
<a data-class="footer.filters.all" href="#/all">All</a>
</li>
<li>
<a data-class="footer.filters.active" href="#/active">Active</a>
</li>
<li>
<a data-class="footer.filters.completed" href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" data-class="footer.clearCompleted">
Clear completed (<span data-class="footer.completedCount"></span>)
</button>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Original Knockout version from <a href="https://github.com/ashish01/knockoutjs-todos" target="_blank">Ashish Sharma</a></p>
<p>Rewritten to use Knockout 2.0 and standard template by <a href="http://knockmeout.net" target="_blank">Ryan Niemeyer</a></p>
<p>Patches/fixes for cross-browser compat: <a href="http://twitter.com/addyosmani" target="_blank">Addy Osmani</a></p>
<p>Implemented Knockout classBindingProvider: <a href="http://github.com/mberkom" target="_blank">Michael Berkompas</a></p>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Original Knockout version from <a href="https://github.com/ashish01/knockoutjs-todos" target="_blank">Ashish Sharma</a></p>
<p>Rewritten to use Knockout 2.0 and standard template by <a href="http://knockmeout.net" target="_blank">Ryan Niemeyer</a></p>
<p>Patches/fixes for cross-browser compat: <a href="http://twitter.com/addyosmani" target="_blank">Addy Osmani</a></p>
<p>Implemented Knockout classBindingProvider: <a href="http://github.com/mberkom" target="_blank">Michael Berkompas</a></p>
</footer>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/director/build/director.js"></script>
<script src="bower_components/knockout.js/knockout.js"></script>
<script src="js/lib/knockout-classBindingProvider.min.js"></script>
<script src="js/app.js"></script>
</body>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/director/build/director.js"></script>
<script src="bower_components/knockout.js/knockout.js"></script>
<script src="js/lib/knockout-classBindingProvider.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
labs/architecture-examples/montage/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="montage" id="montage-todomvc">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Montage • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<link rel="stylesheet" href="assets/app.css">
</head>
<body>
<div id="todo-container"></div>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bundle-0-d67ccde.js"
data-montage="packages/montage@4763f06/"
data-montage-hash="4763f06"
data-application-hash="1156f40"></script>
<script type="text/montage-serialization">
{
"owner": {
"prototype": "montage/ui/loader.reel",
"properties": {
"element": {
"#": "todo-container"
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Montage • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<link rel="stylesheet" href="assets/app.css">
</head>
<body>
<div id="todo-container"></div>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bundle-0-d67ccde.js"
data-montage="packages/montage@4763f06/"
data-montage-hash="4763f06"
data-application-hash="1156f40"></script>
<script type="text/montage-serialization">
{
"owner": {
"prototype": "montage/ui/loader.reel",
"properties": {
"element": {
"#": "todo-container"
}
}
}
}
}
</script>
</body>
</script>
</body>
</html>
labs/architecture-examples/o_O/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="funnyfacejs">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>o_O • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</head>
<body>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input id="new-todo" data-bind="value: current; enterKey: add" placeholder="What needs to be done?" autofocus>
</header>
<section id="main" data-bind="visible: todos.count">
<div>
<input id="toggle-all" type="checkbox" data-bind="value: allCompleted;">
<label for="toggle-all">Mark all as complete</label>
</div>
<ul id="todo-list" data-bind="foreach: todos">
<li data-bind="class: klass; visible">
<div class="view">
<input class="toggle" type="checkbox" data-bind="value: completed">
<label data-bind="text: title; dblclick: startEditing"></label>
<button class="destroy" data-bind="click: remove"></button>
</div>
<input class="edit" data-bind="value: title; enterKey: stopEditing; blur: stopEditing">
</li>
</ul>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>o_O • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</head>
<body>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input id="new-todo" data-bind="value: current; enterKey: add" placeholder="What needs to be done?" autofocus>
</header>
<section id="main" data-bind="visible: todos.count">
<div>
<input id="toggle-all" type="checkbox" data-bind="value: allCompleted;">
<label for="toggle-all">Mark all as complete</label>
</div>
<ul id="todo-list" data-bind="foreach: todos">
<li data-bind="class: klass; visible">
<div class="view">
<input class="toggle" type="checkbox" data-bind="value: completed">
<label data-bind="text: title; dblclick: startEditing"></label>
<button class="destroy" data-bind="click: remove"></button>
</div>
<input class="edit" data-bind="value: title; enterKey: stopEditing; blur: stopEditing">
</li>
</ul>
</section>
<footer id="footer" data-bind="visible: todos.count">
<span id="todo-count">
<strong data-bind="text: remainingCount"></strong>
<span class="word" data-bind="text: pluralize('item', remainingCount())"></span> left
</span>
<ul id="filters" >
<li><a 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="click: removeCompleted; visible: completedCount">
Clear completed (<span data-bind='text: completedCount'></span>)
</button>
</footer>
</section>
<footer id="footer" data-bind="visible: todos.count">
<span id="todo-count">
<strong data-bind="text: remainingCount"></strong>
<span class="word" data-bind="text: pluralize('item', remainingCount())"></span> left
</span>
<ul id="filters" >
<li><a 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="click: removeCompleted; visible: completedCount">
Clear completed (<span data-bind='text: completedCount'></span>)
</button>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://weepy.github.com">weepy (Jonah Fox)</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://weepy.github.com">weepy (Jonah Fox)</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="js/lib/o_O.js" ></script>
<script src="js/lib/o_O.router.js"></script>
<script src="js/app.js"></script>
</body>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="js/lib/o_O.js" ></script>
<script src="js/lib/o_O.router.js"></script>
<script src="js/app.js"></script>
</body>
</html>
labs/architecture-examples/olives/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="olives">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Olives • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input id="new-todo" placeholder="What needs to be done?" autofocus data-event="listen:keydown,addTask">
</header>
<section id="main" data-stats="bind:toggleClass,nbItems,show">
<input id="toggle-all" type="checkbox" data-event="listen:click,toggleAll" data-stats="bind:toggleCheck,nbCompleted">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list" data-model="foreach">
<li data-model="bind:toggleClass,completed,completed;">
<div class="view">
<input class="toggle" type="checkbox" data-model="bind:checked,completed">
<label data-model="bind:textContent,title" data-event="listen:dblclick,startEdit"></label>
<button class="destroy" data-event="listen:click,remove"></button>
</div>
<input class="edit" data-model="bind:value,title" data-event="listen:keydown,stopEdit; listen:blur,stopEdit">
</li>
</ul>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Olives • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input id="new-todo" placeholder="What needs to be done?" autofocus data-event="listen:keydown,addTask">
</header>
<section id="main" data-stats="bind:toggleClass,nbItems,show">
<input id="toggle-all" type="checkbox" data-event="listen:click,toggleAll" data-stats="bind:toggleCheck,nbCompleted">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list" data-model="foreach">
<li data-model="bind:toggleClass,completed,completed;">
<div class="view">
<input class="toggle" type="checkbox" data-model="bind:checked,completed">
<label data-model="bind:textContent,title" data-event="listen:dblclick,startEdit"></label>
<button class="destroy" data-event="listen:click,remove"></button>
</div>
<input class="edit" data-model="bind:value,title" data-event="listen:keydown,stopEdit; listen:blur,stopEdit">
</li>
</ul>
</section>
<footer id="footer" data-stats="bind:toggleClass,nbItems,show">
<span id="todo-count"><strong data-stats="bind:innerHTML,nbLeft">0</strong> <span data-stats="bind:innerHTML,plural"></span> left</span>
<button id="clear-completed" data-event="listen:click,delAll" data-stats="bind:toggleClass,nbCompleted,show">
Clear completed (<span data-stats="bind:innerHTML,nbCompleted"></span>)
</button>
</footer>
</section>
<footer id="footer" data-stats="bind:toggleClass,nbItems,show">
<span id="todo-count"><strong data-stats="bind:innerHTML,nbLeft">0</strong> <span data-stats="bind:innerHTML,plural"></span> left</span>
<button id="clear-completed" data-event="listen:click,delAll" data-stats="bind:toggleClass,nbCompleted,show">
Clear completed (<span data-stats="bind:innerHTML,nbCompleted"></span>)
</button>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://github.com/podefr">Olivier Scherrer</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/podefr">Olivier Scherrer</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/requirejs/require.js"></script>
<script src="bower_components/emily/build/Emily.js"></script>
<script src="bower_components/olives/build/Olives.js"></script>
<script src="js/lib/Tools.js"></script>
<script src="js/uis/Input.js"></script>
<script src="js/uis/List.js"></script>
<script src="js/uis/Controls.js"></script>
<script src="js/app.js"></script>
</body>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/requirejs/require.js"></script>
<script src="bower_components/emily/build/Emily.js"></script>
<script src="bower_components/olives/build/Olives.js"></script>
<script src="js/lib/Tools.js"></script>
<script src="js/uis/Input.js"></script>
<script src="js/uis/List.js"></script>
<script src="js/uis/Controls.js"></script>
<script src="js/app.js"></script>
</body>
</html>
labs/architecture-examples/plastronjs/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="plastronjs">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>PlastronJS • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<style>
#filters.none li.none,
#filters.active li.active,
#filters.completed li.completed {
font-weight: bold;
}
</style>
</head>
<body>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input id="new-todo" class="todo-entry" placeholder="What needs to be done?" autofocus>
</header>
<section id="main">
<input id="toggle-all" class="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">
<title>PlastronJS • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<style>
#filters.none li.none,
#filters.active li.active,
#filters.completed li.completed {
font-weight: bold;
}
</style>
</head>
<body>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input id="new-todo" class="todo-entry" placeholder="What needs to be done?" autofocus>
</header>
<section id="main">
<input id="toggle-all" class="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>
<ul id="filters" class="none">
<li class="none">
<a href="#/">All</a>
</li>
<li class="active">
<a href="#/active">Active</a>
</li>
<li class="completed">
<a href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" class="clear-completed">Clear completed</button>
</footer>
</section>
<footer id="footer">
<span id="todo-count"><strong>0</strong> item left</span>
<ul id="filters" class="none">
<li class="none">
<a href="#/">All</a>
</li>
<li class="active">
<a href="#/active">Active</a>
</li>
<li class="completed">
<a href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" class="clear-completed">Clear completed</button>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://rhysbrettbowen.com">Rhys Brett-Bowen</a> (<a href="https://twitter.com/RhysBB">RhysBB</a>)</p>
<p>Using <a href="https://github.com/rhysbrettbowen/PlastronJS">PlastronJS</a> and <a href="https://developers.google.com/closure/">Closure Tools</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://rhysbrettbowen.com">Rhys Brett-Bowen</a> (<a href="https://twitter.com/RhysBB">RhysBB</a>)</p>
<p>Using <a href="https://github.com/rhysbrettbowen/PlastronJS">PlastronJS</a> and <a href="https://developers.google.com/closure/">Closure Tools</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="bower_components/todomvc-common/base.js"></script>
<!-- <script src="http://localhost:9810/compile?id=todomvc&mode=raw"></script> -->
<script src="js/compiled.js"></script>
</body>
<script src="bower_components/todomvc-common/base.js"></script>
<!-- <script src="http://localhost:9810/compile?id=todomvc&mode=raw"></script> -->
<script src="js/compiled.js"></script>
</body>
</html>
labs/architecture-examples/puremvc/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="puremvc">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>PureMVC • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</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">
<title>PureMVC • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</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="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 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>
</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="bower_components/todomvc-common/base.js"></script>
<!-- TODOMVC PROJECT BASE -->
<script src="bower_components/todomvc-common/base.js"></script>
<!-- FLATIRION DIRECTOR ROUTING LIBRARY -->
<script src="bower_components/director/director.js"></script>
<!-- FLATIRION DIRECTOR ROUTING LIBRARY -->
<script src="bower_components/director/director.js"></script>
<!-- PUREMVC LIBRARY -->
<script src="bower_components/puremvc/puremvc-1.0.1.js"></script>
<!-- PUREMVC LIBRARY -->
<script src="bower_components/puremvc/puremvc-1.0.1.js"></script>
<!-- APPLICATION CONSTANTS -->
<script src="js/AppConstants.js"></script>
<!-- APPLICATION CONSTANTS -->
<script src="js/AppConstants.js"></script>
<!-- PROXIES -->
<script src="js/model/proxy/TodoProxy.js"></script>
<!-- PROXIES -->
<script src="js/model/proxy/TodoProxy.js"></script>
<!-- EVENTS -->
<script src="js/view/event/AppEvents.js"></script>
<!-- EVENTS -->
<script src="js/view/event/AppEvents.js"></script>
<!-- VIEW COMPONENTS -->
<script src="js/view/component/TodoForm.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>
<!-- 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>
<!-- 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>
<!-- APPLICATION -->
<script src="js/app.js"></script>
<!-- START THE APPLICATION -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var app = new todomvc.Application();
});
</script>
</body>
<!-- START THE APPLICATION -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var app = new todomvc.Application();
});
</script>
</body>
</html>
labs/architecture-examples/rappidjs/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="rappidjs">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>rAppid.js • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<style>
.hide {
display: none;
}
</style>
</head>
<body>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="app/lib/rappidjs.min.js"></script>
<script>
rAppid.bootStrap('app/Todo.xml', 'config.json', function (err, systemManager, application) {
if (!err) {
application.start(null, function () {
application.render(document.body);
});
} else {
console.warn(err);
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>rAppid.js • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<style>
.hide {
display: none;
}
});
</script>
</body>
</style>
</head>
<body>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="app/lib/rappidjs.min.js"></script>
<script>
rAppid.bootStrap('app/Todo.xml', 'config.json', function (err, systemManager, application) {
if (!err) {
application.start(null, function () {
application.render(document.body);
});
} else {
console.warn(err);
}
});
</script>
</body>
</html>
labs/architecture-examples/serenadejs/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="serenadejs">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Serenade.js • TodoMVC</title>
<link href="bower_components/todomvc-common/base.css" rel="stylesheet">
</head>
<body>
<script id="app" type="text/serenade">
section#todoapp
header#header
form[event:submit=newTodo!]
h1 "todos"
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Serenade.js • TodoMVC</title>
<link href="bower_components/todomvc-common/base.css" rel="stylesheet">
</head>
<body>
<script id="app" type="text/serenade">
section#todoapp
header#header
form[event:submit=newTodo!]
h1 "todos"
input#new-todo[binding:change=@newTitle placeholder="What needs to be done?" autofocus="autofocus"]
input#new-todo[binding:change=@newTitle placeholder="What needs to be done?" autofocus="autofocus"]
- if @allCount
section#main
input#toggle-all[type="checkbox" binding:change=@allCompleted]
- if @allCount
section#main
input#toggle-all[type="checkbox" binding:change=@allCompleted]
label[for="toggle-all"] "Mark all as complete"
label[for="toggle-all"] "Mark all as complete"
ul#todo-list
- collection @filtered
- view "todo"
ul#todo-list
- collection @filtered
- view "todo"
footer#footer
span#todo-count
strong @activeCount
" "
@label
footer#footer
span#todo-count
strong @activeCount
" "
@label
ul#filters
li
a.all[class:selected=@filterAll href="#/"] "All"
li
a.active[class:selected=@filterActive href="#/active"] "Active"
li
a.completed[class:selected=@filterCompleted href="#/completed"] "Completed"
- if @completedCount
button#clear-completed[event:click=clearCompleted]
"Clear completed (" @completedCount ")"
</script>
ul#filters
li
a.all[class:selected=@filterAll href="#/"] "All"
li
a.active[class:selected=@filterActive href="#/active"] "Active"
li
a.completed[class:selected=@filterCompleted href="#/completed"] "Completed"
- if @completedCount
button#clear-completed[event:click=clearCompleted]
"Clear completed (" @completedCount ")"
</script>
<script id="todo" type="text/serenade">
li[class:editing=@edit class:completed=@completed]
form[event:submit=edited!]
input.edit[on:load=loadField event:blur=edited! binding:change=@title]
<script id="todo" type="text/serenade">
li[class:editing=@edit class:completed=@completed]
form[event:submit=edited!]
input.edit[on:load=loadField event:blur=edited! binding:change=@title]
- unless @edit
input.toggle[type="checkbox" binding:change=@completed]
label[event:dblclick=edit] @title
button.destroy[event:click=removeTodo]
</script>
- unless @edit
input.toggle[type="checkbox" binding:change=@completed]
label[event:dblclick=edit] @title
button.destroy[event:click=removeTodo]
</script>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://elabs.se">Elabs</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://elabs.se">Elabs</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/director/build/director.js"></script>
<script src="js/lib/serenade.js"></script>
<script src="js/app.js"></script>
</body>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/director/build/director.js"></script>
<script src="js/lib/serenade.js"></script>
<script src="js/app.js"></script>
</body>
</html>
labs/architecture-examples/somajs/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="somajs">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>soma.js • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<section id="todoapp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>soma.js • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<section id="todoapp">
<!-- HEADER VIEW, template: /views/header.js (todo.HeaderView) -->
<header id="header">
<h1>todos</h1>
<input id="new-todo" placeholder="What needs to be done?" autofocus data-keypress="add()" data-blur="clear()">
</header>
<!-- HEADER VIEW, template: /views/header.js (todo.HeaderView) -->
<header id="header">
<h1>todos</h1>
<input id="new-todo" placeholder="What needs to be done?" autofocus data-keypress="add()" data-blur="clear()">
</header>
<!-- MAIN VIEW, template: /views/main.js (todo.MainView) -->
<section id="main" data-show="{{isVisible}}">
<input id="toggle-all" type="checkbox" data-click="toggleAll()" data-checked="{{allCompleted}}">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list" class="data-cloak">
<li data-repeat="todo in items" class="{{completedClass(todo.completed)}} {{todo.editing}}">
<div class="view">
<input class="toggle" type="checkbox" data-checked="{{todo.completed}}" data-click="toggle(todo)">
<label data-dblclick="edit(todo)">{{todo.title}}</label>
<button class="destroy" data-click="remove(todo)"></button>
</div>
<input class="edit" value="{{todo.title}}" data-keypress="update(todo)" data-blur="update(todo)">
</li>
</ul>
</section>
<!-- MAIN VIEW, template: /views/main.js (todo.MainView) -->
<section id="main" data-show="{{isVisible}}">
<input id="toggle-all" type="checkbox" data-click="toggleAll()" data-checked="{{allCompleted}}">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list" class="data-cloak">
<li data-repeat="todo in items" class="{{completedClass(todo.completed)}} {{todo.editing}}">
<div class="view">
<input class="toggle" type="checkbox" data-checked="{{todo.completed}}" data-click="toggle(todo)">
<label data-dblclick="edit(todo)">{{todo.title}}</label>
<button class="destroy" data-click="remove(todo)"></button>
</div>
<input class="edit" value="{{todo.title}}" data-keypress="update(todo)" data-blur="update(todo)">
</li>
</ul>
</section>
<!-- FOOTER VIEW, template: /views/footer.js (todo.FooterView) -->
<footer id="footer" class="data-cloak" data-show="{{footerVisible}}">
<span id="todo-count"><strong>{{active}}</strong> {{itemLabel}} left</span>
<ul id="filters">
<li>
<a class="{{highlightFilter('')}}" href="#/">All</a>
</li>
<li>
<a class="{{highlightFilter('active')}}" href="#/active">Active</a>
</li>
<li>
<a class="{{highlightFilter('completed')}}" href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" data-show="{{clearCompletedVisible()}}" data-click="clearCompleted()">Clear completed ({{completed}})</button>
</footer>
<!-- FOOTER VIEW, template: /views/footer.js (todo.FooterView) -->
<footer id="footer" class="data-cloak" data-show="{{footerVisible}}">
<span id="todo-count"><strong>{{active}}</strong> {{itemLabel}} left</span>
<ul id="filters">
<li>
<a class="{{highlightFilter('')}}" href="#/">All</a>
</li>
<li>
<a class="{{highlightFilter('active')}}" href="#/active">Active</a>
</li>
<li>
<a class="{{highlightFilter('completed')}}" href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" data-show="{{clearCompletedVisible()}}" data-click="clearCompleted()">Clear completed ({{completed}})</button>
</footer>
</section>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://soundstep.com">Romuald Quantin</a> (<a href="http://somajs.github.io/somajs/">soma.js</a>)</p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://soundstep.com">Romuald Quantin</a> (<a href="http://somajs.github.io/somajs/">soma.js</a>)</p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<!-- LIBRARIES -->
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/director/build/director.js"></script>
<script src="bower_components/soma.js/build/soma.js"></script>
<script src="bower_components/soma-template/build/soma-template.js"></script>
<!-- LIBRARIES -->
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/director/build/director.js"></script>
<script src="bower_components/soma.js/build/soma.js"></script>
<script src="bower_components/soma-template/build/soma-template.js"></script>
<!-- TODO APP -->
<script src="js/models/todos.js"></script>
<script src="js/models/router.js"></script>
<script src="js/views/header.js"></script>
<script src="js/views/main.js"></script>
<script src="js/views/footer.js"></script>
<script src="js/app.js"></script>
</body>
<!-- TODO APP -->
<script src="js/models/todos.js"></script>
<script src="js/models/router.js"></script>
<script src="js/views/header.js"></script>
<script src="js/views/main.js"></script>
<script src="js/views/footer.js"></script>
<script src="js/app.js"></script>
</body>
</html>
labs/architecture-examples/stapes/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="stapes">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Stapes.js • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</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">
<title>Stapes.js • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</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>
<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">Clear completed (1)</button>
</footer>
</section>
<footer id="footer">
<span id="todo-count"><strong>0</strong> item 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">Clear completed (1)</button>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://github.com/hay/stapes/">Hay Kranen</a>.</p>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://github.com/hay/stapes/">Hay Kranen</a>.</p>
</footer>
<script id="todo-template" type="text/x-handlebars-template">
{{#todos}}
<li class="{{#completed}}completed{{/completed}}" data-id="{{id}}">
<div class="view">
<input class="toggle" type="checkbox" {{#completed}}checked="checked"{{/completed}}>
<label>{{title}}</label>
<button class="destroy"></button>
</div>
<input class="edit" value="{{title}}">
</li>
{{/todos}}
</script>
<script id="todo-template" type="text/x-handlebars-template">
{{#todos}}
<li class="{{#completed}}completed{{/completed}}" data-id="{{id}}">
<div class="view">
<input class="toggle" type="checkbox" {{#completed}}checked="checked"{{/completed}}>
<label>{{title}}</label>
<button class="destroy"></button>
</div>
<input class="edit" value="{{title}}">
</li>
{{/todos}}
</script>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/handlebars.js/handlebars.js"></script>
<script src="bower_components/stapes/stapes.js"></script>
<script src="js/controllers/todoController.js"></script>
<script src="js/models/todoModel.js"></script>
<script src="js/views/todoView.js"></script>
<script src="js/stores/todoStore.js"></script>
<script>
TodoController.init();
</script>
</body>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/handlebars.js/handlebars.js"></script>
<script src="bower_components/stapes/stapes.js"></script>
<script src="js/controllers/todoController.js"></script>
<script src="js/models/todoModel.js"></script>
<script src="js/views/todoView.js"></script>
<script src="js/stores/todoStore.js"></script>
<script>
TodoController.init();
</script>
</body>
</html>
labs/architecture-examples/thorax/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="thorax">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Thorax • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</head>
<body>
<script type="text/template" data-template-name="app">
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input id="new-todo" placeholder="What needs to be done?" autofocus>
</header>
{{^empty collection}}
<section id="main">
<input id="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
{{#collection item-view="todo-item" tag="ul" id="todo-list"}}
<div class="view">
<input class="toggle" type="checkbox" {{#if completed}}checked="checked"{{/if}}>
<label>{{title}}</label>
<button class="destroy"></button>
</div>
<input class="edit" value="{{title}}">
{{/collection}}
</section>
{{view "stats" tag="footer" id="footer"}}
{{/empty}}
</section>
<div id="info">
<p>Double-click to edit a todo</p>
<p>Written by <a href="https://github.com/addyosmani">Addy Osmani</a> &amp; <a href="https://github.com/eastridge">Ryan Eastridge</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</div>
</script>
<script type="text/template" data-template-name="stats">
<span id="todo-count"><strong>{{remaining}}</strong> {{itemText}} left</span>
<ul id="filters">
<li>
{{#link "/" class="selected"}}All{{/link}}
</li>
<li>
{{#link "/active"}}Active{{/link}}
</li>
<li>
{{#link "/completed"}}Completed{{/link}}
</li>
</ul>
{{#if completed}}
<button id="clear-completed">Clear completed ({{completed}})</button>
{{/if}}
</script>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/handlebars.js/handlebars.js"></script>
<script src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/backbone/backbone.js"></script>
<script src="bower_components/thorax/thorax.js"></script>
<script src="js/lib/backbone-localstorage.js"></script>
<script>
// Grab the text from the templates we created above
Thorax.templates = {
app: Handlebars.compile($('script[data-template-name="app"]').html()),
stats: Handlebars.compile($('script[data-template-name="stats"]').html())
};
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Thorax • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</head>
<body>
<script type="text/template" data-template-name="app">
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<input id="new-todo" placeholder="What needs to be done?" autofocus>
</header>
{{^empty collection}}
<section id="main">
<input id="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
{{#collection item-view="todo-item" tag="ul" id="todo-list"}}
<div class="view">
<input class="toggle" type="checkbox" {{#if completed}}checked="checked"{{/if}}>
<label>{{title}}</label>
<button class="destroy"></button>
</div>
<input class="edit" value="{{title}}">
{{/collection}}
</section>
{{view "stats" tag="footer" id="footer"}}
{{/empty}}
</section>
<div id="info">
<p>Double-click to edit a todo</p>
<p>Written by <a href="https://github.com/addyosmani">Addy Osmani</a> &amp; <a href="https://github.com/eastridge">Ryan Eastridge</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</div>
</script>
<script type="text/template" data-template-name="stats">
<span id="todo-count"><strong>{{remaining}}</strong> {{itemText}} left</span>
<ul id="filters">
<li>
{{#link "/" class="selected"}}All{{/link}}
</li>
<li>
{{#link "/active"}}Active{{/link}}
</li>
<li>
{{#link "/completed"}}Completed{{/link}}
</li>
</ul>
{{#if completed}}
<button id="clear-completed">Clear completed ({{completed}})</button>
{{/if}}
</script>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/handlebars.js/handlebars.js"></script>
<script src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/backbone/backbone.js"></script>
<script src="bower_components/thorax/thorax.js"></script>
<script src="js/lib/backbone-localstorage.js"></script>
<script>
// Grab the text from the templates we created above
Thorax.templates = {
app: Handlebars.compile($('script[data-template-name="app"]').html()),
stats: Handlebars.compile($('script[data-template-name="stats"]').html())
};
// Initialize the app object
window.app = {};
</script>
<script src="js/models/todo.js"></script>
<script src="js/collections/todos.js"></script>
<script src="js/views/todo-item.js"></script>
<script src="js/views/stats.js"></script>
<script src="js/views/app.js"></script>
<script src="js/routers/router.js"></script>
<script src="js/app.js"></script>
</body>
// Initialize the app object
window.app = {};
</script>
<script src="js/models/todo.js"></script>
<script src="js/collections/todos.js"></script>
<script src="js/views/todo-item.js"></script>
<script src="js/views/stats.js"></script>
<script src="js/views/app.js"></script>
<script src="js/routers/router.js"></script>
<script src="js/app.js"></script>
</body>
</html>
labs/architecture-examples/typescript-angular/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" ng-app="todomvc" data-framework="typescript">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Typescript & AngularJS • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<style>[ng-cloak] { display: none; }</style>
</head>
<body>
<section id="todoapp" ng-controller="todoCtrl">
<header id="header">
<h1>todos</h1>
<form id="todo-form" ng-submit="addTodo()">
<input id="new-todo" placeholder="What needs to be done?" ng-model="newTodo" autofocus>
</form>
</header>
<section id="main" ng-show="todos.length" ng-cloak>
<input id="toggle-all" type="checkbox" ng-model="allChecked" ng-click="markAll(allChecked)">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<li ng-repeat="todo in todos | filter:statusFilter" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
<div class="view">
<input class="toggle" type="checkbox" ng-model="todo.completed">
<label ng-dblclick="editTodo(todo)">{{todo.title}}</label>
<button class="destroy" ng-click="removeTodo(todo)"></button>
</div>
<form ng-submit="doneEditing(todo)">
<input class="edit" ng-model="todo.title" todo-blur="doneEditing(todo)" todo-focus="todo == editedTodo">
</form>
</li>
</ul>
</section>
<footer id="footer" ng-show="todos.length" ng-cloak>
<span id="todo-count"><strong>{{remainingCount}}</strong>
<ng-pluralize count="remainingCount" when="{ one: 'item left', other: 'items left' }"></ng-pluralize>
</span>
<ul id="filters">
<li>
<a ng-class="{selected: location.path() == '/'} " href="#/">All</a>
</li>
<li>
<a ng-class="{selected: location.path() == '/active'}" href="#/active">Active</a>
</li>
<li>
<a ng-class="{selected: location.path() == '/completed'}" href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" ng-click="clearDoneTodos()" ng-show="doneCount">Clear completed ({{doneCount}})</button>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Credits:
<a href="http://twitter.com/cburgdorf">Christoph Burgdorf</a>,
<a href="http://ericbidelman.com">Eric Bidelman</a>,
<a href="http://jacobmumm.com">Jacob Mumm</a>
<a href="http://igorminar.com">Igor Minar</a> and
<a href="http://zamboch.blogspot.com">Pavel Savara</a>
</p>
</footer>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="js/models/TodoItem.js"></script>
<script src="js/controllers/TodoCtrl.js"></script>
<script src="js/services/TodoStorage.js"></script>
<script src="js/directives/TodoFocus.js"></script>
<script src="js/directives/TodoBlur.js"></script>
<script src="js/Application.js"></script>
</body>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Typescript & AngularJS • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<style>[ng-cloak] { display: none; }</style>
</head>
<body>
<section id="todoapp" ng-controller="todoCtrl">
<header id="header">
<h1>todos</h1>
<form id="todo-form" ng-submit="addTodo()">
<input id="new-todo" placeholder="What needs to be done?" ng-model="newTodo" autofocus>
</form>
</header>
<section id="main" ng-show="todos.length" ng-cloak>
<input id="toggle-all" type="checkbox" ng-model="allChecked" ng-click="markAll(allChecked)">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<li ng-repeat="todo in todos | filter:statusFilter" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
<div class="view">
<input class="toggle" type="checkbox" ng-model="todo.completed">
<label ng-dblclick="editTodo(todo)">{{todo.title}}</label>
<button class="destroy" ng-click="removeTodo(todo)"></button>
</div>
<form ng-submit="doneEditing(todo)">
<input class="edit" ng-model="todo.title" todo-blur="doneEditing(todo)" todo-focus="todo == editedTodo">
</form>
</li>
</ul>
</section>
<footer id="footer" ng-show="todos.length" ng-cloak>
<span id="todo-count"><strong>{{remainingCount}}</strong>
<ng-pluralize count="remainingCount" when="{ one: 'item left', other: 'items left' }"></ng-pluralize>
</span>
<ul id="filters">
<li>
<a ng-class="{selected: location.path() == '/'} " href="#/">All</a>
</li>
<li>
<a ng-class="{selected: location.path() == '/active'}" href="#/active">Active</a>
</li>
<li>
<a ng-class="{selected: location.path() == '/completed'}" href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" ng-click="clearDoneTodos()" ng-show="doneCount">Clear completed ({{doneCount}})</button>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Credits:
<a href="http://twitter.com/cburgdorf">Christoph Burgdorf</a>,
<a href="http://ericbidelman.com">Eric Bidelman</a>,
<a href="http://jacobmumm.com">Jacob Mumm</a>
<a href="http://igorminar.com">Igor Minar</a> and
<a href="http://zamboch.blogspot.com">Pavel Savara</a>
</p>
</footer>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="js/models/TodoItem.js"></script>
<script src="js/controllers/TodoCtrl.js"></script>
<script src="js/services/TodoStorage.js"></script>
<script src="js/directives/TodoFocus.js"></script>
<script src="js/directives/TodoBlur.js"></script>
<script src="js/Application.js"></script>
</body>
</html>
labs/architecture-examples/typescript-backbone/index.html
View file @ 7cb4d0e7
......@@ -44,70 +44,70 @@ https://github.com/documentcloud/backbone/blob/master/examples/todos/index.html
<!doctype html>
<html lang="en" data-framework="typescript">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TypeScript & Backbone.js • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</head>
<body>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<div id="create-todo">
<input id="new-todo" placeholder="What needs to be done?" autofocus>
</div>
</header>
<section id="main">
<input class="check mark-all-done" id="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list"></ul>
</section>
<footer id="footer">
<div id="todo-stats"></div>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>TypeScript version by <a href="http://blogs.msdn.com/lukeh">Luke Hoban</a></p>
<p>Cleanup, edits: <a href="http://addyosmani.com">Addy Osmani</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TypeScript & Backbone.js • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</head>
<body>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
<div id="create-todo">
<input id="new-todo" placeholder="What needs to be done?" autofocus>
</div>
</header>
<section id="main">
<input class="check mark-all-done" id="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list"></ul>
</section>
<footer id="footer">
<div id="todo-stats"></div>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>TypeScript version by <a href="http://blogs.msdn.com/lukeh">Luke Hoban</a></p>
<p>Cleanup, edits: <a href="http://addyosmani.com">Addy Osmani</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<!-- Templates -->
<!-- Templates -->
<script type="text/template" id="item-template">
<div class="todo <%= done ? 'done' : '' %>">
<div class="view display">
<input class="toggle check" type="checkbox" <%= done ? 'checked' : '' %>>
<label class="todo-content"><%= content %></label>
<button class="destroy"></button>
<script type="text/template" id="item-template">
<div class="todo <%= done ? 'done' : '' %>">
<div class="view display">
<input class="toggle check" type="checkbox" <%= done ? 'checked' : '' %>>
<label class="todo-content"><%= content %></label>
<button class="destroy"></button>
</div>
<input class="edit todo-input" value="<%= content %>">
</div>
<input class="edit todo-input" value="<%= content %>">
</div>
</script>
</script>
<script type="text/template" id="stats-template">
<% if (total) { %>
<span id="todo-count">
<strong class="number"><%= remaining %></strong>
<span class="word"><%= remaining == 1 ? 'item' : 'items' %></span> left
</span>
<% } %>
<% if (done) { %>
<span class="todo-clear">
<button id="clear-completed">
Clear completed (<span class="number-done"><%= done %></span>)
</button>
</span>
<% } %>
</script>
<script type="text/template" id="stats-template">
<% if (total) { %>
<span id="todo-count">
<strong class="number"><%= remaining %></strong>
<span class="word"><%= remaining == 1 ? 'item' : 'items' %></span> left
</span>
<% } %>
<% if (done) { %>
<span class="todo-clear">
<button id="clear-completed">
Clear completed (<span class="number-done"><%= done %></span>)
</button>
</span>
<% } %>
</script>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/lodash/lodash.js"></script>
<script src="bower_components/backbone/backbone.js"></script>
<script src="js/libs/backbone/backbone.localStorage.js"></script>
<script src="js/app.js"></script>
</body>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/lodash/lodash.js"></script>
<script src="bower_components/backbone/backbone.js"></script>
<script src="js/libs/backbone/backbone.localStorage.js"></script>
<script src="js/app.js"></script>
</body>
</html>
labs/dependency-examples/angularjs_require/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="angularjs">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AngularJS & RequireJS • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<style>[ng-cloak] { display: none; }</style>
<script>
// Include angular-loader to allow modules to be loaded in any order.
/*
AngularJS v1.0.2
(c) 2010-2012 Google, Inc. http://angularjs.org
License: MIT
*/
(function(i){'use strict';function d(c,b,e){return c[b]||(c[b]=e())}return d(d(i,"angular",Object),"module",function(){var c={};return function(b,e,f){e&&c.hasOwnProperty(b)&&(c[b]=null);return d(c,b,function(){function a(a,b,d){return function(){c[d||"push"]([a,b,arguments]);return g}}if(!e)throw Error("No module: "+b);var c=[],d=[],h=a("$injector","invoke"),g={_invokeQueue:c,_runBlocks:d,requires:e,name:b,provider:a("$provide","provider"),factory:a("$provide","factory"),service:a("$provide","service"), value:a("$provide","value"),constant:a("$provide","constant","unshift"),filter:a("$filterProvider","register"),controller:a("$controllerProvider","register"),directive:a("$compileProvider","directive"),config:h,run:function(a){d.push(a);return this}};f&&h(f);return g})}})})(window);
</script>
</head>
<body>
<section id="todoapp" ng-controller="TodoController">
<header id="header">
<h1>todos</h1>
<form id="todo-form" ng-submit="addTodo()">
<input id="new-todo" placeholder="What needs to be done?" ng-model="newTodo" autofocus>
</form>
</header>
<section id="main" ng-show="todos.length" ng-cloak>
<input id="toggle-all" type="checkbox" ng-model="allChecked" ng-click="markAll(allChecked)">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<li ng-repeat="todo in todos | filter:statusFilter" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
<div class="view">
<input class="toggle" type="checkbox" ng-model="todo.completed">
<label ng-dblclick="editTodo(todo)">{{todo.title}}</label>
<button class="destroy" ng-click="removeTodo(todo)"></button>
</div>
<form ng-submit="doneEditing(todo)">
<input class="edit" ng-model="todo.title" todo-blur="doneEditing(todo)" todo-focus="todo == editedTodo">
</form>
</li>
</ul>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AngularJS & RequireJS • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<style>[ng-cloak] { display: none; }</style>
<script>
// Include angular-loader to allow modules to be loaded in any order.
/*
AngularJS v1.0.2
(c) 2010-2012 Google, Inc. http://angularjs.org
License: MIT
*/
(function(i){'use strict';function d(c,b,e){return c[b]||(c[b]=e())}return d(d(i,"angular",Object),"module",function(){var c={};return function(b,e,f){e&&c.hasOwnProperty(b)&&(c[b]=null);return d(c,b,function(){function a(a,b,d){return function(){c[d||"push"]([a,b,arguments]);return g}}if(!e)throw Error("No module: "+b);var c=[],d=[],h=a("$injector","invoke"),g={_invokeQueue:c,_runBlocks:d,requires:e,name:b,provider:a("$provide","provider"),factory:a("$provide","factory"),service:a("$provide","service"), value:a("$provide","value"),constant:a("$provide","constant","unshift"),filter:a("$filterProvider","register"),controller:a("$controllerProvider","register"),directive:a("$compileProvider","directive"),config:h,run:function(a){d.push(a);return this}};f&&h(f);return g})}})})(window);
</script>
</head>
<body>
<section id="todoapp" ng-controller="TodoController">
<header id="header">
<h1>todos</h1>
<form id="todo-form" ng-submit="addTodo()">
<input id="new-todo" placeholder="What needs to be done?" ng-model="newTodo" autofocus>
</form>
</header>
<section id="main" ng-show="todos.length" ng-cloak>
<input id="toggle-all" type="checkbox" ng-model="allChecked" ng-click="markAll(allChecked)">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<li ng-repeat="todo in todos | filter:statusFilter" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
<div class="view">
<input class="toggle" type="checkbox" ng-model="todo.completed">
<label ng-dblclick="editTodo(todo)">{{todo.title}}</label>
<button class="destroy" ng-click="removeTodo(todo)"></button>
</div>
<form ng-submit="doneEditing(todo)">
<input class="edit" ng-model="todo.title" todo-blur="doneEditing(todo)" todo-focus="todo == editedTodo">
</form>
</li>
</ul>
</section>
<footer id="footer" ng-show="todos.length" ng-cloak>
<span id="todo-count"><strong>{{remainingCount}}</strong>
<ng-pluralize count="remainingCount" when="{ one: 'item left', other: 'items left' }"></ng-pluralize>
</span>
<ul id="filters">
<li>
<a ng-class="{selected: location.path() == '/'} " href="#/">All</a>
</li>
<li>
<a ng-class="{selected: location.path() == '/active'}" href="#/active">Active</a>
</li>
<li>
<a ng-class="{selected: location.path() == '/completed'}" href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" ng-click="clearDoneTodos()" ng-show="remainingCount < todos.length">Clear completed ({{todos.length - remainingCount}})</button>
</footer>
</section>
<footer id="footer" ng-show="todos.length" ng-cloak>
<span id="todo-count"><strong>{{remainingCount}}</strong>
<ng-pluralize count="remainingCount" when="{ one: 'item left', other: 'items left' }"></ng-pluralize>
</span>
<ul id="filters">
<li>
<a ng-class="{selected: location.path() == '/'} " href="#/">All</a>
</li>
<li>
<a ng-class="{selected: location.path() == '/active'}" href="#/active">Active</a>
</li>
<li>
<a ng-class="{selected: location.path() == '/completed'}" href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" ng-click="clearDoneTodos()" ng-show="remainingCount < todos.length">Clear completed ({{todos.length - remainingCount}})</button>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Credits:
<a href="http://twitter.com/cburgdorf">Christoph Burgdorf</a>,
<a href="http://ericbidelman.com">Eric Bidelman</a>,
<a href="http://jacobmumm.com">Jacob Mumm</a>,
<a href="http://igorminar.com">Igor Minar</a> and
<a href="http://twitter.com/passy">Pascal Hartig</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>Credits:
<a href="http://twitter.com/cburgdorf">Christoph Burgdorf</a>,
<a href="http://ericbidelman.com">Eric Bidelman</a>,
<a href="http://jacobmumm.com">Jacob Mumm</a>,
<a href="http://igorminar.com">Igor Minar</a> and
<a href="http://twitter.com/passy">Pascal Hartig</a>
</p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="bower_components/todomvc-common/base.js"></script>
<script data-main="js/main" src="bower_components/requirejs/require.js"></script>
</body>
<script src="bower_components/todomvc-common/base.js"></script>
<script data-main="js/main" src="bower_components/requirejs/require.js"></script>
</body>
</html>
labs/dependency-examples/backbone_marionette_require/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="marionettejs">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Backbone.Marionette & Requirejs • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<section id="todoapp">
<header id="header">
</header>
<section id="main">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Backbone.Marionette & Requirejs • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<section id="todoapp">
<header id="header">
</header>
<section id="main">
</section>
<footer id="footer">
</footer>
</section>
<footer id="footer">
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://github.com/jsoverson">Jarrod Overson</a></p>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://github.com/jsoverson">Jarrod Overson</a></p>
</footer>
<script src="bower_components/todomvc-common/base.js"></script>
<script data-main="js/main" src="bower_components/requirejs/require.js"></script>
</body>
<script src="bower_components/todomvc-common/base.js"></script>
<script data-main="js/main" src="bower_components/requirejs/require.js"></script>
</body>
</html>
labs/dependency-examples/canjs_require/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="canjs">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CanJS + RequireJS • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</head>
<body>
<section id="todoapp">
</section>
<div id="info">
<p>Double-click to edit a todo</p>
<p>Written by <a href="http://bitovi.com">Bitovi</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</div>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CanJS + RequireJS • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</head>
<body>
<section id="todoapp">
</section>
<div id="info">
<p>Double-click to edit a todo</p>
<p>Written by <a href="http://bitovi.com">Bitovi</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</div>
<script src="bower_components/todomvc-common/base.js"></script>
<script data-main="js/app" src="bower_components/requirejs/require.js"></script>
</body>
<script src="bower_components/todomvc-common/base.js"></script>
<script data-main="js/app" src="bower_components/requirejs/require.js"></script>
</body>
</html>
labs/dependency-examples/chaplin-brunch/app/assets/index.html
View file @ 7cb4d0e7
<!doctype html>
<html class="no-js" lang="en" data-framework="chaplin">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Chaplin &amp; Brunch • TodoMVC</title>
<link rel="stylesheet" href="../bower_components/todomvc-common/base.css">
<link rel="stylesheet" href="../bower_components/todomvc-common/base.js">
<!--[if IE]>
<script src="../../../assets/ie.js"></script>
<![endif]-->
<script src="app.js"></script>
<script>require('initialize');</script>
</head>
<body>
<section id="todoapp">
<header id="header"></header>
<section id="main"></section>
<footer id="footer"></footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://paulmillr.com">Paul Miller</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
</body>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Chaplin &amp; Brunch • TodoMVC</title>
<link rel="stylesheet" href="../bower_components/todomvc-common/base.css">
<link rel="stylesheet" href="../bower_components/todomvc-common/base.js">
<!--[if IE]>
<script src="../../../assets/ie.js"></script>
<![endif]-->
<script src="app.js"></script>
<script>require('initialize');</script>
</head>
<body>
<section id="todoapp">
<header id="header"></header>
<section id="main"></section>
<footer id="footer"></footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://paulmillr.com">Paul Miller</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
</body>
</html>
labs/dependency-examples/chaplin-brunch/public/index.html
View file @ 7cb4d0e7
<!doctype html>
<html class="no-js" lang="en" data-framework="chaplin">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Chaplin &amp; Brunch • TodoMVC</title>
<link rel="stylesheet" href="../bower_components/todomvc-common/base.css">
<link rel="stylesheet" href="../bower_components/todomvc-common/base.js">
<!--[if IE]>
<script src="../../../assets/ie.js"></script>
<![endif]-->
<script src="app.js"></script>
<script>require('initialize');</script>
</head>
<body>
<section id="todoapp">
<header id="header"></header>
<section id="main"></section>
<footer id="footer"></footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://paulmillr.com">Paul Miller</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
</body>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Chaplin &amp; Brunch • TodoMVC</title>
<link rel="stylesheet" href="../bower_components/todomvc-common/base.css">
<link rel="stylesheet" href="../bower_components/todomvc-common/base.js">
<!--[if IE]>
<script src="../../../assets/ie.js"></script>
<![endif]-->
<script src="app.js"></script>
<script>require('initialize');</script>
</head>
<body>
<section id="todoapp">
<header id="header"></header>
<section id="main"></section>
<footer id="footer"></footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://paulmillr.com">Paul Miller</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
</body>
</html>
labs/dependency-examples/enyo_backbone/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="enyo">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Enyo & Backbone.js • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</head>
<body>
<div id="todo-container" class="enyo-unselectable">
<!-- Enyo comes with a build and deploy process that will minify and concatenate your files into 2 js files. One for enyo, and one for app code. For the purpose of demonstration, I used the debug loading library to handle the dependency management. The loader nagivates directories for package.js files and injects files they list into the DOM. -->
<script src="bower_components/todomvc-common/base.js"></script>
<script src="enyo/enyo.js"></script>
<script src="js/package.js"></script>
</div>
</body>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Enyo & Backbone.js • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</head>
<body>
<div id="todo-container" class="enyo-unselectable">
<!-- Enyo comes with a build and deploy process that will minify and concatenate your files into 2 js files. One for enyo, and one for app code. For the purpose of demonstration, I used the debug loading library to handle the dependency management. The loader nagivates directories for package.js files and injects files they list into the DOM. -->
<script src="bower_components/todomvc-common/base.js"></script>
<script src="enyo/enyo.js"></script>
<script src="js/package.js"></script>
</div>
</body>
</html>
labs/dependency-examples/thorax_lumbar/public/index.html
View file @ 7cb4d0e7
<!doctype html>
<html lang="en" data-framework="thorax">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Thorax & Lumbar • TodoMVC</title>
<link rel="stylesheet" href="../bower_components/todomvc-common/base.css">
</head>
<body>
<script src="base.js"></script>
</body>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Thorax & Lumbar • TodoMVC</title>
<link rel="stylesheet" href="../bower_components/todomvc-common/base.css">
</head>
<body>
<script src="base.js"></script>
</body>
</html>
vanilla-examples/vanillajs/index.html
View file @ 7cb4d0e7
This diff is collapsed.
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