Register Javascript per modul di Phoenix

18 Sep 2019

Dalam mengembangkan aplikasi web dengan framework Phoenix kadang kita butuh menyertakan file javascript hanya pada halaman tertentu saja. Karena di Phoenix semua file javascript dijadikan satu pada file app.js yang nantinya akan dikompilasi menggunakan webpack, namun phoenix menyediakan cara untuk merender view hanya jika view tersebut ada yaitu pakai fungsi render_existing/3.

render_existing(module, template, assigns \\ [])

Contoh struktur aplikasi phoenix

struktur-aplikasi

Dalam kasus ini kita akan membuat file book.js hanya dimuat pada controller Buku saja, untuk pertama-tama kita salin/buat file book.js didalam folder priv/static/js kemudian pada file layout lib/book_store_web/templates/layout/app.html.eex tambahkan kode berikut

<%= render_existing(@view_module, "script.html", assigns) %>

Dibawah kode ini:

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

Lalu bikin fungsi render pada file lib/book_store_web/views/book_view.ex

def render("script.html", _assigns) do
  ~s{<script type="text/javascript" src="/js/book.js"></script>}
  |> raw
end

semoga bermanfaat