What about them interactive modules?
With the Smart DOMReady technique, I would do something like this:
$(document).on 'home:ready, search:ready, contact:ready', (e) -> # When in home, search, contact
Every time I want to use the search tool in an other page, I’d have to add the said page
:ready event. This can quickly become a mess depending on what kind of module you’re working on and how many times you need it.
<form action="search"> <input type="search"> <input type="submit" value="Search"> </form> <script>$(document).trigger('search:rendered')</script>
$(document).on 'search:rendered', (e) -> # Doesn’t matter what page we’re in
That’s basically it!
Let’s say this time you have custom selects. You’ll most likely be in a situation where you have multiple
$(document).trigger('custom-select:rendered') in one page coming from different partials. It’s also quite easy to imagine with Turbolinks or any other AJAX requests.
Here’s how I do it:
$(document).on 'custom-select:rendered', (e) -> for select in $('.custom-select') continue if select.data('initiated') == true select.data('initiated', true) # Initialize element behavior
You can now trigger as many
custom-select:rendered events as you want without any risks, it’ll only initialize the newly added HTML elements or the ones that haven’t been initiated yet.
Let me know if you have simliar or completely different solutions, I’d love to hear about them.
See an example using Rails’
Useful when jQuery/Zepto is loaded at the bottom of your
Node.js App Structure Generator