updated app

node_modules/derby-examples/chat/views/404.html

@@ -0,0 +1,16 @@
+<!--
+  This is a static page, so it has views and styles, but no associated scripts
+-->
+
+<Title:>
+  Chat
+
+<!--
+  Static pages don't include the Derby client library, so they can't have bound
+  variables that automatically update. However, they do support Handlebars-style
+  templating with a model and/or context object
+-->
+<Body:>
+  <h1>404</h1>
+  <p>Sorry, we can't find anything at <b>{{url}}</b>.
+  <p>Try heading back to the <a href=/lobby>lobby</a>.

node_modules/derby-examples/chat/views/chat/index.html

@@ -0,0 +1,80 @@
+<!--
+  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 the names of views. Pre-defined views are
+  capitalized by convention, but view names are case-insensitive. Pre-defined views
+  are automatically included when the page is rendered.
+-->
+
+<Title:>
+  Chat ({_numMessages}) - {_user.name}
+
+<Head:>
+  <meta name=viewport content="width=device-width">
+
+<Header:>
+  <!-- Other templates are referenced like custom HTML elements -->
+  <app:alert>
+
+<Body:>
+  <div id=page>
+    <div id=messages>
+      <ul id=messageList>
+        {#each _room.messages}
+          <app:message>
+        {/}
+      </ul>
+    </div>
+    <div id=foot>
+      <img id=inputPic src=/img/s.png class="pic {_user.picClass}" alt="">
+      <div id=inputs>
+        <input id=inputName value={_user.name}>
+        <form id=inputForm x-bind=submit:postMessage>
+          <input id=commentInput value={_newComment} autofocus>
+        </form>
+      </div>
+    </div>
+  </div>
+
+<!--
+  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>
+    <!--
+      Handlebars syntax is used for conditional blocks, except that the
+      name need not be repeated in the closing tag or if-else blocks
+    -->
+    {#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>
+
+<message:>
+  <li>
+    <!-- Square brackets perform interpolation within a model name -->
+    <img src=img/s.png class="pic {{users.[userId].picClass}}" alt="">
+    <div class=message>
+      <p class=time>{._displayTime}</p>
+      <p><b>{users.[userId].name}</b></p>
+      <p>{{comment}}</p>
+    </div>
+  </li>