Commit 633a99f2 authored by Sindre Sorhus's avatar Sindre Sorhus

Derby app improvements

- Update dependencies
- Improve readme
- Convert to tabs
- Code style
- CSS simplification
- Quotes
- and more
parent fdc05921
# Derby.js TodoMVC app
# Derby TodoMVC app
> MVC framework making it easy to write realtime, collaborative applications that run in both Node.js and browsers.
[Website](http://derbyjs.com)
## Getting started
[NodeJS](http://nodejs.org) (>= 0.8.0) is required to run this app.
[Node.js](http://nodejs.org) (>=0.8.0) is required to run this app.
### Run the app
## Run the app
`make run`
This will install the dependencies locally, compile the coffeescript and run
This will install the dependencies locally, compile the CoffeScript and run
the demo server for you.
## Play with the code
In one window, run `make` which will continue to compile the coffeescript as
you save changes. In a separate window run `node server.js` and open up the
shown URL.
### Play with the code
## TODO
* PROBLEM: Add ie.js - I've added the include to the template, but it
obviously gets stripped out due to the comments, plus Nate mentioned that
there's work needing to be done for ie < 10.
* QUESTION: Check with derby folk whether there's a better way to do the filtering while still using a route, and other improvements.
In one window, run `make` which will continue to compile the CoffeScript as
you save changes. In a separate window run `node server.js` and open up the
shown URL.
......@@ -2,14 +2,14 @@
"name": "todomvc-derby",
"description": "TodoMVC todo app using Derby",
"version": "0.1.0",
"main": "./server.js",
"main": "server.js",
"dependencies": {
"derby": "0.3.13",
"express": "3.0.0beta4",
"gzippo": ">=0.1.4"
"derby": "~0.3.13",
"express": "~3.0.1",
"gzippo": "~0.2.0"
},
"private": true,
"devDependencies": {
"coffee-script": ">=1.3.1"
}
"coffee-script": "~1.4.0"
},
"private": true
}
......@@ -42,17 +42,9 @@
text-decoration: line-through;
}
section.empty-list, footer.empty-list {
display: none;
}
section.empty-list #toggle-all {
display: none;
}
button#clear-completed.non-completed {
display: none;
}
section.empty-list, footer.empty-list,
section.empty-list #toggle-all,
button#clear-completed.non-completed,
#todo-list li.editing input.toggle,
#todo-list li.editing button.destroy {
display: none;
......
exports.connect = function() {
model = this.model
var model = this.model;
// Hide the reconnect link for a second after clicking it
model.set('hideReconnect', true)
model.set('hideReconnect', true);
setTimeout(function() {
model.set('hideReconnect', false)
}, 1000)
model.socket.socket.connect()
}
model.set('hideReconnect', false);
}, 1000);
model.socket.socket.connect();
};
exports.reload = function() {
window.location.reload()
}
window.location.reload();
};
var config = {
filename: __filename
, styles: '../styles/ui'
, scripts: {
function ui(derby, options) {
derby.createLibrary({
filename: __filename,
styles: '../styles/ui',
scripts: {
connectionAlert: require('./connectionAlert')
}
};
module.exports = ui
ui.decorate = 'derby'
function ui(derby, options) {
derby.createLibrary(config, options)
}, options);
}
module.exports = ui;
ui.decorate = 'derby';
<Head:>
<link href=/base.css rel=stylesheet>
<link href="/base.css" rel="stylesheet">
<Title:>
DerbyJS • TodoMVC
......@@ -14,7 +14,7 @@
<section id="main" class="{#unless _list.shown}empty-list{/}">
<input id="toggle-all" type="checkbox" checked="{noItems(_list.active)}" x-bind=click:clickToggleAll>
<label for="toggle-all">Mark all as complete</label>
<ul id=todo-list>{#each _list.shown}<app:todo>{/}</ul>
<ul id="todo-list">{#each _list.shown}<app:todo>{/}</ul>
</section>
<app:todoFooter>
......@@ -24,13 +24,13 @@
<todoHeader:>
<header id="header">
<h1>todos</h1>
<form x-bind=submit:add><input id="new-todo" placeholder="What needs to be done?" autofocus value={_newTodo}></form>
<form x-bind=submit:add><input id="new-todo" placeholder="What needs to be done?" value={_newTodo} autofocus></form>
</header>
<todo:>
<li data-id={{id}} class="{#if .completed}completed{else}active{/}{#if ._editing} editing{/}">
<div>
<input class="toggle" type="checkbox" checked={.completed}>
<input class="toggle" type="checkbox" checked="{.completed}">
<form x-bind=submit:submitEdit>
<input class="text" x-bind="focus:startEdit, blur:endEdit" value="{.text}">
</form>
......@@ -59,9 +59,8 @@
<info:>
<footer id="info">
<h3>Open this <a href="/{{_groupName}}">ToDo list</a> in another browser, or share it with a friend to collaborate!</h3>
<h3>Open this <a href="/{{_groupName}}">app</a> in another browser, or share it with a friend to collaborate!</h3>
<p>Click on a todo to edit</p>
<p>Template by <a href="http://github.com/sindresorhus">Sindre Sorhus</a></p>
<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>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
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