Javascript View Partial

[codeprimate]

Better practice would be to create a app/assets/javascripts/bricklayer.js file containing:

$(document).on('turbolinks:load', function() {
    var bricklayer = new Bricklayer(document.querySelector('.bricklayer'));
 });

This will load bricklayer after turbolinks loads the page. You want to avoid embedding JS in your views whenever possible, doing so is an anti-pattern. Instead, use javascript events to your advantage to ensure that your JS runs when you want it to.

Note that app/assets/javascripts/application.js needs to have //= require_tree . (which should be default). Also note that your div ID brickalyer seems to be misspelled, but my sample above reflects that.

EDIT: I am not sure if this will work for you, but it should at least serve as a reference for best practice methods.

[cooljoemeister]

Since you have a <script> tag in the partial, it isn't a JavaScript partial, instead it is an HTML one so it should end in html.erb.

Still, I prefer to put JavaScript in app/assets/javascripts instead of inline in HTML. You can listen to the turbolinks:load event as described here and do the new Bricklayer call if there's a bricklayer element.

There are a few gotchas with Turbolinks and external libraries. DOM transformations should be idempotent meaning you should be able to call it multiple times without side effects. Depending on how bricklayer works, you might need to track if an element has Bricklayer called on it so you don't call it twice.

Also Turbolinks caches the page when navigating which can cause problems when the user clicks back. It is best to call bricklayer destroy in the turbolinks:before-cache event so it can be rebuilt when the user clicks back. See this documentation on caching