insertar - llamar javascript desde html

Incluir Javascript en ciertas páginas en la aplicación Phoenix Framework

Question

Tengo un poco de Javascript que solo quiero incluir en ciertas páginas de mi aplicación Phoenix.

Ahora mismo tengo el Javascript dentro de una etiqueta de script en myapp/web/templates/post/form.html.eex .

Entiendo que puedo mover el JavaScript a web/static/js/app.js ... pero no quiero incluir el Javascript en cada página (solo se requiere en 2 páginas específicas).

¿Cuál es la mejor manera de cargar esta sección de Javascript en ciertas páginas de mi aplicación sin duplicar el código y violar el principio DRY?

Answer 1

1.

Coloque todo ese javascript de form.html.eex en su propio archivo (tal vez algo como js / posts.js ).

Agregue esto en la parte inferior:

export var Post = { run: function() {
  // put initializer stuff here
  // for example:
  // $(document).on(''click'', ''.remove-post'', my_remove_post_function)
}}

2.

En su app.html , debajo de <script src="#{static_path(@conn, "/js/app.js")}"></script> agregue esto:

<%= render_existing @view_module, "scripts.html", assigns %>

3.

Luego, en su vista (probablemente views / post_view.ex ), agregue un método como este:

def render("scripts.html", _assigns) do
  ~s{<script>require("web/static/js/posts").Post.run()</script>}
  |> raw
end

Conclusión

Ahora, el archivo javascript post.js solo se cargará cuando se use la vista de publicación.

Answer 2

Aquí hay una forma de lograr esto.

El JavaScript que tiene en la etiqueta de secuencia de comandos, lo mueve a un archivo separado.

Usted divide su javascript "regular" (que se incluirá en cada página) y este javascript personalizado (que se incluirá en algunas páginas específicas) en directorios separados. por ejemplo, app / common / standard.js y app / custom / unique.js

Usted modifica su brunch-config.js de la siguiente manera:

module.exports = {
 files: {
    javascripts: {
      joinTo: {
        ''custom.js'': /^app[////]common[////][/S*?]/.js/,
        ''app.js'': /^app[////]common[////][/S*?]/.js/
        }
    }
}

Luego incluyes app.js en todas las páginas,

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

pero custom.js solo en plantillas de página (o diseño) que lo necesitan.

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

Answer 3

Otra forma es hacer uso de clases / elementos específicos de la página. Por ejemplo, el siguiente código en app.js asegurará que el código solo se ejecute en la página de lesson/show , ya que solo esa página tiene un elemento con el id #lesson-container :

import { startLesson } from ''./lesson/show.ts'';

if (document.querySelector(''#lesson-container'')) {
  startLesson();
}

Answer 4

<script src="myscripts.js"></script>

Ponga su código en un nuevo archivo .js. Incluya la etiqueta de script con una fuente en la ruta del archivo en los archivos html relevantes.