index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CoffeeScript, Meet Backbone.js: A Tutorial</title>
    <link rel="stylesheet" media="all" href="01/docs/docco.css">
    <style>
      .button a {
        background: #2929FF;
        border-radius: 5px;
        color: #FFF;
        cursor: pointer;
        display: block;
        font: bold 14px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
        padding: 13px 0;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="background"></div>
      <table cellpadding="0" cellspacing="0">
        <thead>
          <tr>
            <th class="docs"><h1>CoffeeScript, Meet Backbone.js</h1></th>
            <th class="code"></th>
          </tr>
        </thead>
        <tbody>
          <tr id="section-1">
            <td class="docs">
              <p><strong>CoffeeScript, Meet Backbone.js</strong> is a simple <a href="http://documentcloud.github.com/backbone">Backbone.js</a> tutorial written in <a href="http://coffeescript.org">CoffeeScript</a> comprised of self-explanatory "hello world" examples of increasing complexity. It was designed to provide a smoother transition from zero to the popular <a href="http://documentcloud.github.com/backbone/#examples-todos">Todos example</a> The bulk of this tutorial is a rewrite of the original <a href="http://arturadib.github.com/hello-backbonejs/">hello-backbonejs</a> tutorial.</p>
              <p>Backbone.js offers a lean <a href='http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller'>MVC framework</a> for organizing your Javascript application. It leads to more maintainable code by untangling the "spaghetti" of callbacks tied to different parts of the DOM and the backend server that often arises in rich client-side applications.</p>
              <p>The tutorial starts with a minimalist View object, and progressively introduces event binding/handling, Models, and Collections.</p>
              <p>Once in the tutorial, use the navigation menu in the top-right corner to view other examples. Example numbers are in order of increasing complexity.</p>
              <p class="button"><a href="/01/docs/script.html">Start the Tutorial</a></p>
            </td>
            <td class="code">
              <p style='color:black;'>The only non-Javascript part of the examples is the following HTML template (with some minimal styling):</p>
              <pre style='color:#777;'>
&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;title&gt;CoffeeScript, Meet Backbone.js: Part N&lt;/title&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;/style.css&quot;&gt;
  &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;header&gt;
    &lt;h1&gt;CoffeeScript, Meet Backbone.js: Part N&lt;/h1&gt;
    &lt;p&gt;Looking for &lt;a href=&quot;docs/script.html&quot;&gt;the documentation&lt;/a&gt;?&lt;/p&gt;
  &lt;/header&gt;
&lt;/body&gt;
&lt;/html&gt;
              </pre>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>