Pattern for moving javascript out of the markup <p><strong>tl;dr</strong> How do I refactor a typical .NET+KnockoutJS site using lots of server generated blocks (controllers) into one where all js is loaded separately from the markup?</p> <p>Up until now all my foray into front-end development has been new projects, built from the ground using modern tooling and workflows, such as React, Redux, isomorphic rendering, etc. Yesterday a legacy project (ok, made three years ago) landed on my lap, and it features "blocks" (an EPi Server term basically meaning templates) such as this:</p> <p><strong>MySuperSlider.ascx</strong></p> <pre><code>&lt;!-- ko foreach: products() --&gt; &lt;div class="my-super-slider"&gt; &lt;a data-bind="attr: { href: ProductUrl }"&gt; &lt;h1 data-bind="text: name"&gt;&lt;/h1&gt; &lt;img src="" data-bind="attr: { src : image.uri }" &lt;/a&gt; &lt;/div&gt; &lt;!-- /ko --&gt; &lt;script type="text/javascript"&gt; // Make a call to the back-end to retrieve the product data used // in the KO template above and apply it ko.applyBindings(new SliderBlock( '&lt;%# ProductsController.GetServiceUrl(ProductsController.BlockUrl, Request.Url)%&gt;', '&lt;%# CurrentPage.PageLink.ID %&gt;', '&lt;%# GetBlockId() %&gt;', '&lt;%# (CurrentPage as SitePageDataBase) == null?string.Empty:(CurrentPage as SitePageDataBase).ProductPageUrl %&gt;?id=', '&lt;%# ContentLanguageCode %&gt;', "&lt;%# SliderContentBlock.ClientID %&gt;"), document.getElementById("&lt;%# SliderContentBlock.ClientID %&gt;")); &lt;/script&gt; </code></pre> <p>Blocks, such as this one, are being reused all over the site, but with different settings (ref <code>SliderContentBlock.ClientID</code> which would fetch data for that current block). The fact that the referenced variables are unique for each block instance and rendered at runtime makes it impossible/hard to split the js out. Except possibly using some <code>data</code> attributes that could later be picked up?</p> <p><strong>Problem: <code>&lt;script&gt;</code> tags cannot be moved out of <code>&lt;head&gt;</code></strong></p> <p>It is currently impossible to move <code>&lt;script&gt;</code> tags out of <code>&lt;head&gt;</code>, thus blocking the rendering pipeline. Neither moving after them after <code>&lt;body&gt;</code> or using <code>async</code> or <code>defer</code> attributes is possible as this would make any inline <code>&lt;script&gt;</code> blocks referring to the <code>ko</code> variable break.</p> <p>So what is a good strategy for refactoring the above code into something that will work regardless of whether the knockout library has been loaded or not?</p> <p><strong>Hacky solution</strong></p> <p>The fastest (and probably most brittle) solution would be to create an array to hold initialization functions that could then be executed later on. Something like</p> <pre><code>&lt;head&gt; &lt;script&gt;window.initFuncs = [];&lt;/script&gt; &lt;/head&gt; &lt;body&gt; ... &lt;!-- inline code pushing init code in the queue --&gt; ... &lt;script&gt;initFuncs.forEach( fn =&gt; fn() );&lt;/script&gt; &lt;/body&gt; </code></pre> <p>Then all I would need to do to defer execution of the above javascript would be to wrap it in a <code>window.initFuncs.push( () =&gt; { ko.applyBindings(/* js goes here */) })</code></p> <p>This would work, but does not exactly seem like the way to go. But this problem must have been solved a million times before (?). How does other Knockout developers do this?</p> <p>I cannot simply move <em>all</em> of the javascript (as it is) out into separate files, as variables are being inserted into the markup during server rendering.</p> <p><strong>Attempt at better solution</strong></p> <p>I am not a .NET developer, but I feel the logic in the template with all the variable substitution would be better done in the backing code, instead of pushing all the details into the front-end. Not sure how that would be done, though.</p>