trigun0x2/JS Loading in web frameworks like Elixir

## app.js
import {Socket} from "phoenix";

let socket = new Socket("/ws");

let App = {
  mainPage: function(data){
    console.log(data);
  },
  anotherPage: function(data){
    console.log(data);
  }
};

// Look for any onload messages, give it the App
// context
if(window.appConfig !== undefined) {
  window.appConfig.onLoad.call(this, App);
}


## application.html.eex
  <body>
    <div class="container">
      <div class="header">
        <h1>YourApp</h1>
      </div>

      <main>
        <%= @inner %>
      </main>

      <div class="footer">
      </div>

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

## index.html.eex
<h1>Hello</h1>

<script>
  window.appConfig = {
    onLoad: function(App) {
      App.mainPage({
        id: "<%= @id %>",
        thing: "wat",
        anotherThing: "AlsoWat"
      });
    }
  };
</script>

## JS Loading in web frameworks like Elixir
How to load page-specific JS functions and pass values to those functions when JS is loaded below your views.
	import {Socket} from "phoenix";

	let socket = new Socket("/ws");

	let App = {
	mainPage: function(data){
	console.log(data);
	},
	anotherPage: function(data){
	console.log(data);
	}
	};

	// Look for any onload messages, give it the App
	// context
	if(window.appConfig !== undefined) {
	window.appConfig.onLoad.call(this, App);
	}
	<body>
	<div class="container">
	<div class="header">
	<h1>YourApp</h1>
	</div>

	<main>
	<%= @inner %>
	</main>

	<div class="footer">
	</div>

	</div> <!-- /container -->
	<script src="<%= static_path(@conn, "/js/app.js") %>"></script>
	<script>require("web/static/js/app")</script>
	</body>
	<h1>Hello</h1>

	<script>
	window.appConfig = {
	onLoad: function(App) {
	App.mainPage({
	id: "<%= @id %>",
	thing: "wat",
	anotherThing: "AlsoWat"
	});
	}
	};
	</script>