11

What is the standard method to require a defined JavaScript module inside of a single Phoenix Template?

I don't want the module required anywhere but inside this one template.

Here is a snippet of the files I am using.

web/static/js/trend_chart.js

let TrendChart = {
  //... some JS module code here
}

web/templates/layout/app.html.eex

This has the standard app load/require. 

...

<script src="<%= static_path(@conn, "/js/app.js") %>"></script>

<script>require("web/static/js/app")</script>

...

web/templates/page/index.html.eex

<!-- what do i put in this template to require / load the TrendChart module code? -->
<!-- i don't want it required globally, so i don't want to put it in the app.html.eex file -->

Update #1

I'm really looking for a way to have two @inner blocks in the main layout. One for the content, and one for additional JavaScript items to be loaded after the content.

Something like sections in ASP.NET MVC. (I know, I know!)

So the app.html.eex would end up something like this:

...
@inner
...

<script src="<%= static_path(@conn, "/js/app.js") %>"></script>
<script>require("web/static/js/app")</script>

*something here to load page/template specific javascript*
Community
  • 1
  • 1
John Long
  • 133
  • 8
  • 1
    So, I have this working by putting the `` before the `@inner` so I can use the loaded JS libs within the individual page template. I was hoping there was another way to append JS after the `@inner` for a specific page. – John Long Jul 12 '15 at 03:29
  • @toraritte this link is dead. probably it's better to include the relevant piece of code here the next time, than an external link alone. – mlen108 Feb 22 '22 at 12:33
  • [This article](https://web.archive.org/web/20170123021546/https://blog.diacode.com/page-specific-javascript-in-phoenix-framework-pt-1) was the answer for me. – toraritte Feb 22 '22 at 16:17
  • thanks. no need to remove your original comment tho - it might confuse others. – mlen108 Feb 23 '22 at 12:58

1 Answers1

8

You can save the file to web/static/assets/trend_chart.js then it will be copied to priv/static/trend_chart.js and available from <script src="<%= static_path(@conn, "/trend_chart.js") %>"></script>.

All files saved to the web/static/assets directory are directly copied to priv/static without going through the build phase.

Chris McCord
  • 8,020
  • 1
  • 37
  • 26
  • 4
    The caveat with this approach is you don't get minification. The other approach would be to set up a rule like here https://github.com/phoenixframework/phoenix/blob/10b989dda6fb2ac38d3e876e32f107294475a156/installer/templates/static/brunch/brunch-config.js#L10 that vendors the single to the same name as itself. – Chris McCord Jul 12 '15 at 15:18
  • That part works fine. I guess what I'm really wondering is if there is any way to have another `@inner` in the layout that could be placed in the layout after the main content and the normal script loading (app.js). Something like [this MVC solution](http://stackoverflow.com/a/13089574/4552290). – John Long Jul 15 '15 at 17:18