RyanScottLewis · October 3, 2012 20:42
diff --git a/mvc_example_1.html b/mvc_example_1.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    
    <meta charset="utf-8" />
    <title>My Site</title>
    
    <style type="text/less">
      .clearfix:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
      }
      
      .clearfix { display: inline-block; }
      
      * html .clearfix { height: 1%; }
      
      body {
        
        ul { list-style-type: none; }
        
        form {
          input, textarea {
            &.block-level {
              display: block;
              width: 97.6%;
            }
          }
        }
        
        nav {
          h1, h2, h3, h4, h5, h6 { margin-bottom: 0; }
          ul { margin-top: 0; }
        }
        
        & > header nav {
          ul {
            .clearfix;
            padding: 0;
            
            li {
              float: left;
              margin-right: 5px;
            }
          }
        }
        
        & > footer {
          .clearfix;
          width: 100%;
          
          & > section {
            float: left;
            width: 50%;
          }
          
          #contact {
            form {
              input[type="submit"] { float: right; }
            }
          }
        }
      }
    </style>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js" type="text/javascript"></script>
    <script src="http://lesscss.googlecode.com/files/less-1.3.0.min.js" type="text/javascript"></script>
    
    <script type="text/coffeescript">
      window.Controller = class Controller
        constructor: (options) ->
          # Wrap the DOM element in something more manageable, such as jQuery.
          # This also allows the developer to pass a jQuery selector String instead of a DOM element
          @element = $(options.element)
    </script>
    
    <script type="text/coffeescript">
      # Make setTimeout more CoffeeScript compatible
      window.delay = (seconds, callback) -> setTimeout(callback, seconds)
      
      window.MySite = {} # A global namespace to hold our controllers
      
      class MySite.ContentController extends Controller
        constructor: ->
          super
          
          @seconds_since_load = 0
          @seconds_since_load_element = $('span', @element)
          @updateTime()
        
        updateTime: ->
          delay 1000, =>
            @seconds_since_load += 1
            @seconds_since_load_element.html(@seconds_since_load)
            @updateTime()
      
      jQuery ->
        window.mySite = # A global namespace to hold our controller instances
          content: new MySite.ContentController( element: $('#content') )
    </script>
  </head>
  <body>
    
    <header>
      <h1>My Site</h1>
      
      <nav>
        <h2>Navigation</h2>
        <ul>
          <li>
            <a href="/">Home</a>
          </li>
          <li>
            <a href="/articles">Articles</a>
          </li>
        </ul>
      </nav>
    </header>
    
    <section id="content">
      You have been viewing this page for <span title="seconds_since_load">0</span> second(s).
    </section>
    
    <footer>
      <section id="about">
        <h3>About</h3>
        <p>I am a person with an internet web application that you are currently looking at, isn't that exciting?!</p>
      </section>
      
      <section id="contact">
        <h3>Contact</h3>
        <p>Use the form below to contact me!</p>
        
        <form action="/contact" method="post" name="contact_message" data-remote="true" autocomplete="on">
          
          <section>
            <label for="contact_message_email">Email:</label>
            <input id="contact_message_email" name="contact_message[email]" class="block-level" type="email" placeholder="user@example.com" required>
          </section>
          
          <section>
            <label for="contact_message_body">Body:</label>
            <textarea id="contact_message_body" name="contact_message[body]" class="block-level" placeholder="Message body" required></textarea>
          </section>
          
          <section>
            <input type="submit">
          </section>
          
        </form>
        
      </section>
    </footer>
    
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>

	<meta charset="utf-8" />
	<title>My Site</title>

	<style type="text/less">
	.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
	}

	.clearfix { display: inline-block; }

	* html .clearfix { height: 1%; }

	body {

	ul { list-style-type: none; }

	form {
	input, textarea {
	&.block-level {
	display: block;
	width: 97.6%;
	}
	}
	}

	nav {
	h1, h2, h3, h4, h5, h6 { margin-bottom: 0; }
	ul { margin-top: 0; }
	}

	& > header nav {
	ul {
	.clearfix;
	padding: 0;

	li {
	float: left;
	margin-right: 5px;
	}
	}
	}

	& > footer {
	.clearfix;
	width: 100%;

	& > section {
	float: left;
	width: 50%;
	}

	#contact {
	form {
	input[type="submit"] { float: right; }
	}
	}
	}
	}
	</style>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
	<script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js" type="text/javascript"></script>
	<script src="http://lesscss.googlecode.com/files/less-1.3.0.min.js" type="text/javascript"></script>

	<script type="text/coffeescript">
	window.Controller = class Controller
	constructor: (options) ->
	# Wrap the DOM element in something more manageable, such as jQuery.
	# This also allows the developer to pass a jQuery selector String instead of a DOM element
	@element = $(options.element)
	</script>

	<script type="text/coffeescript">
	# Make setTimeout more CoffeeScript compatible
	window.delay = (seconds, callback) -> setTimeout(callback, seconds)

	window.MySite = {} # A global namespace to hold our controllers

	class MySite.ContentController extends Controller
	constructor: ->
	super

	@seconds_since_load = 0
	@seconds_since_load_element = $('span', @element)
	@updateTime()

	updateTime: ->
	delay 1000, =>
	@seconds_since_load += 1
	@seconds_since_load_element.html(@seconds_since_load)
	@updateTime()

	jQuery ->
	window.mySite = # A global namespace to hold our controller instances
	content: new MySite.ContentController( element: $('#content') )
	</script>
	</head>
	<body>

	<header>
	<h1>My Site</h1>

	<nav>
	<h2>Navigation</h2>
	<ul>
	<li>
	<a href="/">Home</a>
	</li>
	<li>
	<a href="/articles">Articles</a>
	</li>
	</ul>
	</nav>
	</header>

	<section id="content">
	You have been viewing this page for <span title="seconds_since_load">0</span> second(s).
	</section>

	<footer>
	<section id="about">
	<h3>About</h3>
	<p>I am a person with an internet web application that you are currently looking at, isn't that exciting?!</p>
	</section>

	<section id="contact">
	<h3>Contact</h3>
	<p>Use the form below to contact me!</p>

	<form action="/contact" method="post" name="contact_message" data-remote="true" autocomplete="on">

	<section>
	<label for="contact_message_email">Email:</label>
	<input id="contact_message_email" name="contact_message[email]" class="block-level" type="email" placeholder="user@example.com" required>
	</section>

	<section>
	<label for="contact_message_body">Body:</label>
	<textarea id="contact_message_body" name="contact_message[body]" class="block-level" placeholder="Message body" required></textarea>
	</section>

	<section>
	<input type="submit">
	</section>

	</form>

	</section>
	</footer>

	</body>
	</html>
No results found