Copying index.html & index.coffee to demo.*, backup for reference

src/app/demo.coffee

@@ -0,0 +1,66 @@
+{get, view, ready} = require('derby').createApp module
+
+## ROUTES ##
+
+start = +new Date()
+
+# Derby routes can be rendered on the client and the server
+get '/:roomName?', (page, model, {roomName}) ->
+  roomName ||= 'home'
+
+  # Subscribes the model to any updates on this room's object. Calls back
+  # with a scoped model equivalent to:
+  #   room = model.at "rooms.#{roomName}"
+  model.subscribe "rooms.#{roomName}", (err, room) ->
+    model.ref '_room', room
+
+    # setNull will set a value if the object is currently null or undefined
+    room.setNull 'welcome', "Welcome to #{roomName}!"
+
+    room.incr 'visits'
+
+    # This value is set for when the page initially renders
+    model.set '_timer', '0.0'
+    # Reset the counter when visiting a new route client-side
+    start = +new Date()
+
+    # Render will use the model data as well as an optional context object
+    page.render
+      roomName: roomName
+      randomUrl: parseInt(Math.random() * 1e9).toString(36)
+
+
+## CONTROLLER FUNCTIONS ##
+
+ready (model) ->
+  timer = null
+
+  # Expose the model as a global variable in the browser. This is fun in
+  # development, but it should be removed when writing an app
+  window.model = model
+
+  # Exported functions are exposed as a global in the browser with the same
+  # name as the module that includes Derby. They can also be bound to DOM
+  # events using the "x-bind" attribute in a template.
+  exports.stop = ->
+
+    # Any path name that starts with an underscore is private to the current
+    # client. Nothing set under a private path is synced back to the server.
+    model.set '_stopped', true
+    clearInterval timer
+
+  do exports.start = ->
+    model.set '_stopped', false
+    timer = setInterval ->
+      model.set '_timer', (((+new Date()) - start) / 1000).toFixed(1)
+    , 100
+
+
+  model.set '_showReconnect', true
+  exports.connect = ->
+    # Hide the reconnect link for a second after clicking it
+    model.set '_showReconnect', false
+    setTimeout (-> model.set '_showReconnect', true), 1000
+    model.socket.socket.connect()
+
+  exports.reload = -> window.location.reload()

views/app/demo.html

@@ -0,0 +1,57 @@
+<!--
+  Derby templates are similar to Handlebars, except that they are first
+  parsed as HTML, and there are a few extensions to make them work directly
+  with models. A single HTML template defines the HTML output, the event
+  handlers that update the model after user interaction, and the event handlers
+  that update the DOM when the model changes.
+
+  As in Handlebars, double curly braces output a value literally. Derby
+  templates add single curly braces, which output a value and set up
+  model <- -> view bindings for that object.
+
+  Elements that end in colon define template names. Pre-defined templates
+  are capitalized by convention, but template names are case-insensitive.
+  Pre-defined templates are automatically included when the page is rendered.
+-->
+
+<Title:>
+  {{roomName}} - {_room.visits} visits
+
+<Header:>
+  <!-- Other templates are referenced like custom HTML elements -->
+  <app:alert>
+
+<Body:>
+  <h1>{_room.welcome}</h1>
+  <p><label>Welcome message: <input value="{_room.welcome}"></label></p>
+
+  <p>This page has been visted {_room.visits} times. <app:timer></p>
+
+  <p>Let's go <a href="/{{randomUrl}}">somewhere random</a>.</p>
+
+<timer:>
+  {#if _stopped}
+    <a x-bind="click:start">Start timer</a>
+  {else}
+    You have been here for {_timer} seconds. <a x-bind="click:stop">Stop</a>
+  {/}
+
+<!--
+  connected and canConnect are built-in properties of model. If a variable
+  is not defined in the current context, it will be looked up in the model
+  data and the model properties
+-->
+<alert:>
+  <div id="alert">
+    {#unless connected}
+      <p>
+        {#if canConnect}
+          <!-- Leading space is removed, and trailing space is maintained -->
+          Offline 
+          {#if _showReconnect}&ndash; <a x-bind="click:connect">Reconnect</a>{/}
+        {else}
+          Unable to reconnect &ndash; <a x-bind="click:reload">Reload</a>
+        {/}
+      </p>
+    {/}
+  </div>