Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Merge branch 'master' of git://github.com/addyosmani/todomvc

  • Loading branch information...
commit 726803b839b75b347e747236b3365eebee1f9090 2 parents 47df8a5 + 557228c
Jarrod Overson authored September 04, 2012

Showing 30 changed files with 485 additions and 33 deletions. Show diff stats Hide diff stats

  1. 7  LICENSE.md
  2. 5  architecture-examples/backbone/js/routers/router.js
  3. 28  architecture-examples/backbone/js/views/app.js
  4. 14  architecture-examples/backbone/js/views/todos.js
  5. 4  assets/base.css
  6. 5  dependency-examples/backbone_require/js/routers/router.js
  7. 25  dependency-examples/backbone_require/js/views/app.js
  8. 14  dependency-examples/backbone_require/js/views/todos.js
  9. 3  index.html
  10. 5  labs/architecture-examples/derbyjs/.gitignore
  11. 7  labs/architecture-examples/derbyjs/Makefile
  12. 23  labs/architecture-examples/derbyjs/README.md
  13. 15  labs/architecture-examples/derbyjs/package.json
  14. 1  labs/architecture-examples/derbyjs/public/base.css
  15. 1  labs/architecture-examples/derbyjs/public/bg.png
  16. 1  labs/architecture-examples/derbyjs/public/ie.js
  17. 1  labs/architecture-examples/derbyjs/server.js
  18. 41  labs/architecture-examples/derbyjs/src/server/index.coffee
  19. 3  labs/architecture-examples/derbyjs/src/server/queries.coffee
  20. 18  labs/architecture-examples/derbyjs/src/server/serverError.coffee
  21. 84  labs/architecture-examples/derbyjs/src/todos/index.coffee
  22. 1  labs/architecture-examples/derbyjs/styles/404.styl
  23. 59  labs/architecture-examples/derbyjs/styles/todos/index.styl
  24. 18  labs/architecture-examples/derbyjs/styles/ui.styl
  25. 22  labs/architecture-examples/derbyjs/ui/connectionAlert/index.html
  26. 13  labs/architecture-examples/derbyjs/ui/connectionAlert/index.js
  27. 14  labs/architecture-examples/derbyjs/ui/index.js
  28. 16  labs/architecture-examples/derbyjs/views/404.html
  29. 67  labs/architecture-examples/derbyjs/views/todos/index.html
  30. 3  readme.md
7  LICENSE.md
Source Rendered
... ...
@@ -0,0 +1,7 @@
  1
+Copyright (c) Addy Osmani & Sindre Sorhus
  2
+
  3
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
  4
+
  5
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  6
+
  7
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
5  architecture-examples/backbone/js/routers/router.js
@@ -15,8 +15,9 @@ var app = app || {};
15 15
 			// Set the current filter to be used
16 16
 			window.app.TodoFilter = param.trim() || '';
17 17
 
18  
-			// Trigger a collection reset/addAll
19  
-			window.app.Todos.trigger('reset');
  18
+			// Trigger a collection filter event, causing hiding/unhiding
  19
+			// of Todo view items
  20
+			window.app.Todos.trigger('filter');
20 21
 		}
21 22
 	});
22 23
 
28  architecture-examples/backbone/js/views/app.js
@@ -29,14 +29,15 @@ $(function( $ ) {
29 29
 		initialize: function() {
30 30
 			this.input = this.$('#new-todo');
31 31
 			this.allCheckbox = this.$('#toggle-all')[0];
  32
+			this.$footer = this.$('#footer');
  33
+			this.$main = this.$('#main');
32 34
 
33 35
 			window.app.Todos.on( 'add', this.addAll, this );
34 36
 			window.app.Todos.on( 'reset', this.addAll, this );
35  
-			window.app.Todos.on( 'change:completed', this.addAll, this );
36  
-			window.app.Todos.on( 'all', this.render, this );
  37
+			window.app.Todos.on('change:completed', this.filterOne, this);
  38
+			window.app.Todos.on("filter", this.filterAll, this);
37 39
 
38  
-			this.$footer = this.$('#footer');
39  
-			this.$main = this.$('#main');
  40
+			window.app.Todos.on( 'all', this.render, this );
40 41
 
41 42
 			app.Todos.fetch();
42 43
 		},
@@ -78,18 +79,15 @@ $(function( $ ) {
78 79
 		// Add all items in the **Todos** collection at once.
79 80
 		addAll: function() {
80 81
 			this.$('#todo-list').html('');
  82
+			app.Todos.each(this.addOne, this);
  83
+		},
81 84
 
82  
-			switch( app.TodoFilter ) {
83  
-				case 'active':
84  
-					_.each( app.Todos.remaining(), this.addOne );
85  
-					break;
86  
-				case 'completed':
87  
-					_.each( app.Todos.completed(), this.addOne );
88  
-					break;
89  
-				default:
90  
-					app.Todos.each( this.addOne, this );
91  
-					break;
92  
-			}
  85
+		filterOne : function (todo) {
  86
+			todo.trigger("visible");
  87
+		},
  88
+
  89
+		filterAll : function () {
  90
+			app.Todos.each(this.filterOne, this);
93 91
 		},
94 92
 
95 93
 		// Generate the attributes for a new Todo item.
14  architecture-examples/backbone/js/views/todos.js
@@ -30,6 +30,7 @@ $(function() {
30 30
 		initialize: function() {
31 31
 			this.model.on( 'change', this.render, this );
32 32
 			this.model.on( 'destroy', this.remove, this );
  33
+			this.model.on( 'visible', this.toggleVisible, this );
33 34
 		},
34 35
 
35 36
 		// Re-render the titles of the todo item.
@@ -37,10 +38,23 @@ $(function() {
37 38
 			this.$el.html( this.template( this.model.toJSON() ) );
38 39
 			this.$el.toggleClass( 'completed', this.model.get('completed') );
39 40
 
  41
+			this.toggleVisible();
40 42
 			this.input = this.$('.edit');
41 43
 			return this;
42 44
 		},
43 45
 
  46
+		toggleVisible : function () {
  47
+			this.$el.toggleClass( 'hidden',  this.isHidden());
  48
+		},
  49
+
  50
+		isHidden : function () {
  51
+			var isCompleted = this.model.get('completed');
  52
+			return ( // hidden cases only
  53
+				(!isCompleted && app.TodoFilter === 'completed')
  54
+				|| (isCompleted && app.TodoFilter === 'active')
  55
+			);
  56
+		},
  57
+
44 58
 		// Toggle the `"completed"` state of the model.
45 59
 		togglecompleted: function() {
46 60
 			this.model.toggle();
4  assets/base.css
@@ -404,3 +404,7 @@ label[for='toggle-all'] {
404 404
 		background: none;
405 405
 	}
406 406
 }
  407
+
  408
+.hidden{
  409
+	display:none;
  410
+}
5  dependency-examples/backbone_require/js/routers/router.js
@@ -14,8 +14,9 @@ define([
14 14
 			// Set the current filter to be used
15 15
 			Common.TodoFilter = param.trim() || '';
16 16
 
17  
-			// Trigger a collection reset/addAll
18  
-			Todos.trigger('reset');
  17
+			// Trigger a collection filter event, causing hiding/unhiding
  18
+			// of the Todo view items
  19
+			Todos.trigger('filter');
19 20
 		}
20 21
 	});
21 22
 
25  dependency-examples/backbone_require/js/views/app.js
@@ -33,10 +33,12 @@ define([
33 33
 			this.$footer = this.$('#footer');
34 34
 			this.$main = this.$('#main');
35 35
 
36  
-			Todos.on( 'add', this.addAll, this );
  36
+			Todos.on( 'add', this.addOne, this );
37 37
 			Todos.on( 'reset', this.addAll, this );
38  
-			Todos.on( 'change:completed', this.addAll, this );
  38
+			Todos.on( 'change:completed', this.filterOne, this );
  39
+			Todos.on( "filter", this.filterAll, this);
39 40
 			Todos.on( 'all', this.render, this );
  41
+
40 42
 			Todos.fetch();
41 43
 		},
42 44
 
@@ -77,20 +79,17 @@ define([
77 79
 		// Add all items in the **Todos** collection at once.
78 80
 		addAll: function() {
79 81
 			this.$('#todo-list').html('');
  82
+			Todos.each(this.addOne, this);
  83
+		},
80 84
 
81  
-			switch( Common.TodoFilter ) {
82  
-				case 'active':
83  
-					_.each( Todos.remaining(), this.addOne );
84  
-					break;
85  
-				case 'completed':
86  
-					_.each( Todos.completed(), this.addOne );
87  
-					break;
88  
-				default:
89  
-					Todos.each( this.addOne, this );
90  
-					break;
91  
-			}
  85
+		filterOne : function (todo) {
  86
+			todo.trigger("visible");
92 87
 		},
93 88
 
  89
+		filterAll : function () {
  90
+			app.Todos.each(this.filterOne, this);
  91
+		},
  92
+		
94 93
 		// Generate the attributes for a new Todo item.
95 94
 		newAttributes: function() {
96 95
 			return {
14  dependency-examples/backbone_require/js/views/todos.js
@@ -27,6 +27,7 @@ define([
27 27
 		initialize: function() {
28 28
 			this.model.on( 'change', this.render, this );
29 29
 			this.model.on( 'destroy', this.remove, this );
  30
+			this.model.on( 'visible', this.toggleVisible, this );
30 31
 		},
31 32
 
32 33
 		// Re-render the titles of the todo item.
@@ -34,10 +35,23 @@ define([
34 35
 			this.$el.html( this.template( this.model.toJSON() ) );
35 36
 			this.$el.toggleClass( 'completed', this.model.get('completed') );
36 37
 
  38
+			this.toggleVisible();
37 39
 			this.input = this.$('.edit');
38 40
 			return this;
39 41
 		},
40 42
 
  43
+		toggleVisible : function () {
  44
+			this.$el.toggleClass( 'hidden',  this.isHidden());
  45
+		},
  46
+
  47
+		isHidden : function () {
  48
+			var isCompleted = this.model.get('completed');
  49
+			return ( // hidden cases only
  50
+				(!isCompleted && Common.TodoFilter === 'completed')
  51
+				|| (isCompleted && Common.TodoFilter === 'active')
  52
+			);
  53
+		},
  54
+
41 55
 		// Toggle the `"completed"` state of the model.
42 56
 		togglecompleted: function() {
43 57
 			this.model.toggle();
3  index.html
@@ -167,6 +167,9 @@ <h2 style="text-align:center;font-weight:300">Scroll down for 30+ more framework
167 167
 						<a href="http://todomvc.meteor.com" data-source="http://meteor.com" data-content="Meteor is an ultra-simple environment for building modern websites.A Meteor application is a mix of JavaScript that runs inside a client web browser, JavaScript that runs on the Meteor server inside a Node.js container, and all the supporting HTML fragments, CSS rules, and static assets. Meteor automates the packaging and transmission of these different components. And, it is quite flexible about how you choose to structure those components in your file tree.">Meteor</a>
168 168
 					</li>
169 169
 					<li>
  170
+						<a href="http://todomvc.derbyjs.com" data-source="http://derbyjs.com" data-content="MVC framework making it easy to write realtime, collaborative applications that run in both Node.js and browsers.">Derby</a>
  171
+					</li>
  172
+					<li>
170 173
 						<a href="labs/architecture-examples/montage/" data-source="https://github.com/Motorola-Mobility/montage" data-content="Montage simplifies the development of rich HTML5 applications by providing modular components, real-time two-way data binding, CommonJS dependency management, and many more conveniences.">Montage</a>
171 174
 					</li>
172 175
 					<li>
5  labs/architecture-examples/derbyjs/.gitignore
... ...
@@ -0,0 +1,5 @@
  1
+node_modules
  2
+lib
  3
+gen
  4
+*.swp
  5
+*.un~
7  labs/architecture-examples/derbyjs/Makefile
... ...
@@ -0,0 +1,7 @@
  1
+compile:
  2
+	./node_modules/coffee-script/bin/coffee -bw -o ./lib -c ./src
  3
+
  4
+run:
  5
+	npm install
  6
+	./node_modules/coffee-script/bin/coffee -b -o ./lib -c ./src
  7
+	node server.js
23  labs/architecture-examples/derbyjs/README.md
Source Rendered
... ...
@@ -0,0 +1,23 @@
  1
+# Derby.js TodoMVC app
  2
+
  3
+## Getting started
  4
+
  5
+[NodeJS](http://nodejs.org) (>= 0.8.0) is required to run this app.
  6
+
  7
+## Run the app
  8
+`make run`
  9
+
  10
+This will install the dependencies locally, compile the coffeescript and run
  11
+the demo server for you.
  12
+
  13
+## Play with the code
  14
+In one window, run `make` which will continue to compile the coffeescript as
  15
+you save changes. In a separate window run `node server.js` and open up the
  16
+shown URL.
  17
+
  18
+
  19
+## TODO
  20
+ * PROBLEM: Add ie.js - I've added the include to the template, but it
  21
+   obviously gets stripped out due to the comments, plus Nate mentioned that
  22
+   there's work needing to be done for ie < 10.
  23
+ * QUESTION: Check with derby folk whether there's a better way to do the filtering while still using a route, and other improvements.
15  labs/architecture-examples/derbyjs/package.json
... ...
@@ -0,0 +1,15 @@
  1
+{
  2
+  "name": "todomvc-derbyjs",
  3
+  "description": "",
  4
+  "version": "0.0.0",
  5
+  "main": "./server.js",
  6
+  "dependencies": {
  7
+    "derby": "0.3.13",
  8
+    "express": "3.0.0beta4",
  9
+    "gzippo": ">=0.1.4"
  10
+  },
  11
+  "private": true,
  12
+  "devDependencies": {
  13
+    "coffee-script": ">=1.3.1"
  14
+  }
  15
+}
1  labs/architecture-examples/derbyjs/public/base.css
1  labs/architecture-examples/derbyjs/public/bg.png
1  labs/architecture-examples/derbyjs/public/ie.js
1  labs/architecture-examples/derbyjs/server.js
... ...
@@ -0,0 +1 @@
  1
+require('derby').run(__dirname + '/lib/server', 3003);
41  labs/architecture-examples/derbyjs/src/server/index.coffee
... ...
@@ -0,0 +1,41 @@
  1
+http = require 'http'
  2
+path = require 'path'
  3
+express = require 'express'
  4
+gzippo = require 'gzippo'
  5
+derby = require 'derby'
  6
+todos = require '../todos'
  7
+serverError = require './serverError'
  8
+
  9
+## SERVER CONFIGURATION ##
  10
+
  11
+expressApp = express()
  12
+server = http.createServer expressApp
  13
+module.exports = server
  14
+
  15
+store = derby.createStore
  16
+	listen: server
  17
+require('./queries')(store)
  18
+
  19
+ONE_YEAR = 1000 * 60 * 60 * 24 * 365
  20
+root = path.dirname path.dirname __dirname
  21
+publicPath = path.join root, 'public'
  22
+
  23
+expressApp
  24
+	.use(express.favicon())
  25
+	# Gzip static files and serve from memory
  26
+	.use(gzippo.staticGzip publicPath, maxAge: ONE_YEAR)
  27
+	# Gzip dynamically rendered content
  28
+	.use(express.compress())
  29
+
  30
+	# Adds req.getModel method
  31
+	.use(store.modelMiddleware())
  32
+	# Creates an express middleware from the app's routes
  33
+	.use(todos.router())
  34
+	.use(expressApp.router)
  35
+	.use(serverError root)
  36
+
  37
+
  38
+## SERVER ONLY ROUTES ##
  39
+
  40
+expressApp.all '*', (req) ->
  41
+	throw "404: #{req.url}"
3  labs/architecture-examples/derbyjs/src/server/queries.coffee
... ...
@@ -0,0 +1,3 @@
  1
+module.exports = (store) ->
  2
+	store.query.expose 'todos', 'forGroup', (group) ->
  3
+		@where('group').equals(group)
18  labs/architecture-examples/derbyjs/src/server/serverError.coffee
... ...
@@ -0,0 +1,18 @@
  1
+derby = require 'derby'
  2
+{isProduction} = derby.util
  3
+
  4
+module.exports = (root) ->
  5
+	staticPages = derby.createStatic root
  6
+
  7
+	return (err, req, res, next) ->
  8
+		return next() unless err?
  9
+
  10
+		console.log(if err.stack then err.stack else err)
  11
+
  12
+		## Customize error handling here ##
  13
+		message = err.message || err.toString()
  14
+		status = parseInt message
  15
+		if status is 404
  16
+			staticPages.render '404', res, {url: req.url}, 404
  17
+		else
  18
+			res.send if 400 <= status < 600 then status else 500
84  labs/architecture-examples/derbyjs/src/todos/index.coffee
... ...
@@ -0,0 +1,84 @@
  1
+derby = require 'derby'
  2
+{get, view, ready} = derby.createApp module
  3
+
  4
+derby.use(require '../../ui')
  5
+
  6
+view.fn 'noItems',
  7
+	get: (list) -> !list.length unless list is undefined
  8
+	set: ->
  9
+
  10
+view.fn 'oneItem',
  11
+	get: (list) -> list.length == 1 unless list is undefined
  12
+
  13
+# Redirect the visitor to a random todo list
  14
+get '/', (page) ->
  15
+	page.redirect '/' + parseInt(Math.random() * 1e9).toString(36)
  16
+
  17
+# Sets up the model, the reactive function for stats and renders the todo list
  18
+get '/:groupName', (page, model, {groupName}) ->
  19
+	model.query('todos').forGroup(groupName).subscribe ->
  20
+		model.set '_groupName', groupName
  21
+
  22
+		model.ref '_list.all', model.filter('todos')
  23
+			.where('group').equals(groupName)
  24
+
  25
+		model.ref '_list.completed', model.filter('todos')
  26
+			.where('group').equals(groupName)
  27
+			.where('completed').equals(true)
  28
+
  29
+		model.ref '_list.active', model.filter('todos')
  30
+			.where('group').equals(groupName)
  31
+			.where('completed').notEquals(true)
  32
+
  33
+		model.set '_filter', 'all'
  34
+		model.ref '_list.shown', '_list', '_filter'
  35
+
  36
+		page.render()
  37
+
  38
+# Transitional route for enabling a filter
  39
+get from: '/:groupName', to: '/:groupName/:filterName',
  40
+	forward: (model, {filterName}) ->
  41
+		model.set '_filter', filterName
  42
+	back: (model, params) ->
  43
+		model.set '_filter', 'all'
  44
+
  45
+get from: '/:groupName/:filterName', to: '/:groupName/:filterName',
  46
+	forward: (model, {filterName}) ->
  47
+		model.set '_filter', filterName
  48
+
  49
+ready (model) ->
  50
+	todos = model.at 'todos'
  51
+	newTodo = model.at '_newTodo'
  52
+
  53
+	exports.add = ->
  54
+		# Don't add a blank todo
  55
+		text = newTodo.get().trim()
  56
+		newTodo.set ''
  57
+		return unless text
  58
+		todos.add text: text, group: model.get('_groupName')
  59
+
  60
+	exports.del = (e, el) ->
  61
+		# Derby extends model.at to support creation from DOM nodes
  62
+		todos.del model.at(el).get('id')
  63
+
  64
+	exports.clearCompleted = ->
  65
+		for {id} in model.get('_list.completed')
  66
+			todos.del id
  67
+
  68
+	exports.clickToggleAll = ->
  69
+		value = !!model.get('_list.active.length')
  70
+		for {id} in model.get('_list.all')
  71
+			todos.set id + '.completed', value
  72
+
  73
+	exports.submitEdit = (e, el) ->
  74
+		el.firstChild.blur()
  75
+
  76
+	exports.startEdit = (e, el) ->
  77
+		item = model.at(el)
  78
+		item.set '_editing', true
  79
+
  80
+	exports.endEdit = (e, el) ->
  81
+		item = model.at(el)
  82
+		item.set '_editing', false
  83
+		if item.get('text').trim() == ''
  84
+			todos.del item.get('id')
1  labs/architecture-examples/derbyjs/styles/404.styl
... ...
@@ -0,0 +1 @@
  1
+@import "./base";
59  labs/architecture-examples/derbyjs/styles/todos/index.styl
... ...
@@ -0,0 +1,59 @@
  1
+#todo-list li input.text {
  2
+	word-break: break-word;
  3
+	margin: 15px 15px 15px 60px;
  4
+	line-height: 1.2;
  5
+	-webkit-transition: color 0.4s;
  6
+	-moz-transition: color 0.4s;
  7
+	-ms-transition: color 0.4s;
  8
+	-o-transition: color 0.4s;
  9
+	transition: color 0.4s;
  10
+	font-size: 24px;
  11
+	color: inherit;
  12
+	background-color: transparent;
  13
+	display: block;
  14
+	border: none;
  15
+	width: 506px;
  16
+	padding: 13px 17px 12px 17px;
  17
+	margin: 0 0 0 43px;
  18
+	-webkit-font-smoothing: antialiased;
  19
+	-moz-font-smoothing: antialiased;
  20
+	-ms-font-smoothing: antialiased;
  21
+	-o-font-smoothing: antialiased;
  22
+	font-smoothing: antialiased;
  23
+}
  24
+#todo-list li input.text:focus {
  25
+	border: 1px solid #999;
  26
+	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
  27
+	-webkit-box-sizing: border-box;
  28
+	-moz-box-sizing: border-box;
  29
+	-ms-box-sizing: border-box;
  30
+	-o-box-sizing: border-box;
  31
+	box-sizing: border-box;
  32
+	-webkit-font-smoothing: antialiased;
  33
+	-moz-font-smoothing: antialiased;
  34
+	-ms-font-smoothing: antialiased;
  35
+	-o-font-smoothing: antialiased;
  36
+	font-smoothing: antialiased;
  37
+	outline: none;
  38
+}
  39
+
  40
+#todo-list li.completed input.text {
  41
+	color: #a9a9a9;
  42
+	text-decoration: line-through;
  43
+}
  44
+
  45
+section.empty-list, footer.empty-list {
  46
+	display: none;
  47
+}
  48
+
  49
+section.empty-list #toggle-all {
  50
+	display: none;
  51
+}
  52
+button#clear-completed.non-completed {
  53
+	display: none;
  54
+}
  55
+
  56
+#todo-list li.editing input.toggle,
  57
+#todo-list li.editing button.destroy {
  58
+	display: none;
  59
+}
18  labs/architecture-examples/derbyjs/styles/ui.styl
... ...
@@ -0,0 +1,18 @@
  1
+.connection {
  2
+  position: absolute;
  3
+  text-align: center;
  4
+  top: 0;
  5
+  left: 0;
  6
+  width: 100%;
  7
+  height: 0;
  8
+  z-index: 99;
  9
+}
  10
+.connection > .alert {
  11
+  background: #fff1a8;
  12
+  border: 1px solid #999;
  13
+  border-top: 0;
  14
+  border-radius: 0 0 3px 3px;
  15
+  display: inline-block;
  16
+  line-height: 21px;
  17
+  padding: 0 12px;
  18
+}
22  labs/architecture-examples/derbyjs/ui/connectionAlert/index.html
... ...
@@ -0,0 +1,22 @@
  1
+<connectionAlert:>
  2
+  <div class="connection">
  3
+    <!--
  4
+      connected and canConnect are built-in properties of model. If a variable
  5
+      is not defined in the current context, it will be looked up in the model
  6
+      data and the model properties
  7
+    -->
  8
+    {#unless connected}
  9
+      <p class="alert">
  10
+        {#if canConnect}
  11
+          <!-- Leading space is removed, and trailing space is maintained -->
  12
+          Offline
  13
+          <!-- a :self path alias is automatically created per component -->
  14
+          {#unless :self.hideReconnect}
  15
+            &ndash; <a x-bind="click:connect">Reconnect</a>
  16
+          {/}
  17
+        {else}
  18
+          Unable to reconnect &ndash; <a x-bind="click:reload">Reload</a>
  19
+        {/}
  20
+      </p>
  21
+    {/}
  22
+  </div>
13  labs/architecture-examples/derbyjs/ui/connectionAlert/index.js
... ...
@@ -0,0 +1,13 @@
  1
+exports.connect = function() {
  2
+  model = this.model
  3
+  // Hide the reconnect link for a second after clicking it
  4
+  model.set('hideReconnect', true)
  5
+  setTimeout(function() {
  6
+    model.set('hideReconnect', false)
  7
+  }, 1000)
  8
+  model.socket.socket.connect()
  9
+}
  10
+
  11
+exports.reload = function() {
  12
+  window.location.reload()
  13
+}
14  labs/architecture-examples/derbyjs/ui/index.js
... ...
@@ -0,0 +1,14 @@
  1
+var config = {
  2
+  filename: __filename
  3
+, styles: '../styles/ui'
  4
+, scripts: {
  5
+    connectionAlert: require('./connectionAlert')
  6
+  }
  7
+};
  8
+
  9
+module.exports = ui
  10
+ui.decorate = 'derby'
  11
+
  12
+function ui(derby, options) {
  13
+  derby.createLibrary(config, options)
  14
+}
16  labs/architecture-examples/derbyjs/views/404.html
... ...
@@ -0,0 +1,16 @@
  1
+<!--
  2
+	This is a static template file, so it doesn't have an associated app.
  3
+	It is rendered by the server via a staticPages renderer.
  4
+
  5
+	Since static pages don't include the Derby client library, they can't have
  6
+	bound variables that automatically update. However, they do support initial
  7
+	template tag rendering from a context object and/or model.
  8
+-->
  9
+
  10
+<Title:>
  11
+	Not found
  12
+
  13
+<Body:>
  14
+	<h1>404</h1>
  15
+	<p>Sorry, we can't find anything at <b>{{url}}</b>.
  16
+	<p>Try heading back to the <a href="/">home page</a>.
67  labs/architecture-examples/derbyjs/views/todos/index.html
... ...
@@ -0,0 +1,67 @@
  1
+<Head:>
  2
+	<link href=/base.css rel=stylesheet>
  3
+
  4
+<Title:>
  5
+  DerbyJS • TodoMVC
  6
+
  7
+<Header:>
  8
+	<ui:connectionAlert>
  9
+
  10
+<Body:>
  11
+	<section id="todoapp">
  12
+		<app:todoHeader>
  13
+
  14
+		<section id="main" class="{#unless _list.shown}empty-list{/}">
  15
+			<input id="toggle-all" type="checkbox" checked="{noItems(_list.active)}" x-bind=click:clickToggleAll>
  16
+			<label for="toggle-all">Mark all as complete</label>
  17
+			<ul id=todo-list>{#each _list.shown}<app:todo>{/}</ul>
  18
+		</section>
  19
+
  20
+		<app:todoFooter>
  21
+	</section>
  22
+	<app:info>
  23
+
  24
+<todoHeader:>
  25
+	<header id="header">
  26
+		<h1>todos</h1>
  27
+		<form x-bind=submit:add><input id="new-todo" placeholder="What needs to be done?" autofocus value={_newTodo}></form>
  28
+	</header>
  29
+
  30
+<todo:>
  31
+	<li data-id={{id}} class="{#if .completed}completed{else}active{/}{#if ._editing} editing{/}">
  32
+		<div>
  33
+			<input class="toggle" type="checkbox" checked={.completed}>
  34
+			<form x-bind=submit:submitEdit>
  35
+				<input class="text" x-bind="focus:startEdit, blur:endEdit" value="{.text}">
  36
+			</form>
  37
+			<button class="destroy" x-bind=click:del></button>
  38
+		</div>
  39
+  </li>
  40
+
  41
+<todoFooter:>
  42
+	<footer id="footer" class="{#unless _list.all}empty-list{/}">
  43
+	<span id="todo-count"><strong>{_list.active.length}</strong> item{#unless oneItem(_list.active)}s{/} left</span>
  44
+		<ul id="filters">
  45
+			<li class="all">
  46
+				<a href="/{{_groupName}}" class="{#if equal(_filter, 'all')}selected{/}">All</a>
  47
+			</li>
  48
+			<li class="active">
  49
+				<a href="/{{_groupName}}/active" class="{#if equal(_filter, 'active')}selected{/}">Active</a>
  50
+			</li>
  51
+			<li class="completed">
  52
+				<a href="/{{_groupName}}/completed" class="{#if equal(_filter, 'completed')}selected{/}">Completed</a>
  53
+			</li>
  54
+		</ul>
  55
+		<button x-bind=click:clearCompleted id="clear-completed" class="{#unless _list.completed}non-completed{/}">
  56
+			Clear completed (<span>{_list.completed.length}</span>)
  57
+		</button>
  58
+	</footer>
  59
+
  60
+<info:>
  61
+	<footer id="info">
  62
+		<h3>Open this <a href="/{{_groupName}}">ToDo list</a> in another browser, or share it with a friend to collaborate!</h3>
  63
+		<p>Click on a todo to edit</p>
  64
+		<p>Template by <a href="http://github.com/sindresorhus">Sindre Sorhus</a></p>
  65
+		<p>Created by <a href="http://micknelson.wordpress.com">Michael Nelson</a> and <a href="https://github.com/lackac">László Bácsi</a></p>
  66
+		<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
  67
+	</footer>
3  readme.md
Source Rendered
@@ -47,6 +47,7 @@ We also have a number of in-progress applications in Labs:
47 47
 - [Maria.js](https://github.com/petermichaux/maria)
48 48
 - [cujo.js](http://cujojs.github.com)
49 49
 - [Meteor](http://meteor.com)
  50
+- [Derby](http://derbyjs.com)
50 51
 - [SocketStream](http://www.socketstream.org) + [jQuery](http://jquery.com)
51 52
 - [Ext.js](http://www.sencha.com/products/extjs)
52 53
 - [Sammy.js](http://sammyjs.org)
@@ -141,4 +142,4 @@ For applications that we feel don't quite match the goals of the project, but wh
141 142
 
142 143
 ## License
143 144
 
144  
-[The Unlicense](http://unlicense.org) (i.e Public Domain)
  145
+Licensed under the [MIT](https://github.com/addyosmani/todomvc/tree/master/LICENSE.md) license.

0 notes on commit 726803b

Please sign in to comment.
Something went wrong with that request. Please try again.