Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Modular DOMReady example (Rails)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Modular DOMReady</title>
</head>
<body>
<header></header>
<section role="main">
<%= yield %>
</section>
<footer></footer>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<%= yield :bottom_body_js %>
</body>
</html>
<h1>Partial or view</h1>
<div class="interactive-module">
</div>
<% content_for :bottom_body_js do %>
<script>$(document).trigger('interactive-module:rendered')</script>
<% end %>
Owner

EtienneLem commented May 13, 2013

Outputted HTML would be:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Modular DOMReady</title>
</head>
<body>
  <header></header>

  <section role="main">
    <h1>Partial or layout</h1>

    <div class="interactive-module">
    </div>
  </section>

  <footer></footer>

  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <script>$(document).trigger('interactive-module:rendered')</script>
</body>
</html>

Please don't ever do this. Copying my comment from http://heliom.ca/blog/posts/modular-domready#comment-958215193:

"This is a bad, bad idea. Forgive me for being blunt, but you're coupling two things that shouldn't be coupled at all. You wouldn't put your CSS in style tags inside each partial, so why would you put JavaScript in there?

With this method, your JavaScript is tightly coupled to your HTML. So what if you end up wanting to use it somewhere else without the HTML? You'll end up including a bunch of partials that create a bunch of globals just so everything can access everything else. Plus, this encourages you to write DOM logic mixed in with your application logic, and—even worse—Ruby code that generates JavaScript dynamically. As someone who just transitioned a major web application from code that looked like this, let me tell you firsthand: what you're suggesting is a maintenance nightmare.

Instead, consider modularizing your JavaScript with a library such as RequireJS (http://requirejs.org/) and decoupling your DOM logic and application logic with something like Backbone (http://backbonejs.org/)."

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment