Last active
December 17, 2015 06:59
-
-
Save EtienneLem/5569441 to your computer and use it in GitHub Desktop.
Modular DOMReady example (Rails)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>Partial or view</h1> | |
| <div class="interactive-module"> | |
| </div> | |
| <% content_for :bottom_body_js do %> | |
| <script>$(document).trigger('interactive-module:rendered')</script> | |
| <% end %> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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/)."