web-dev-qa-db-fra.com

Inclure Javascript sur certaines pages dans l'application Framework Phoenix

J'ai un peu de Javascript que je ne souhaite inclure que sur certaines pages de mon application Phoenix.

À l'heure actuelle, j'ai le Javascript dans une balise de script dans myapp/web/templates/post/form.html.eex.

Je comprends que je peux déplacer le code JavaScript vers web/static/js/app.js ... mais je ne souhaite pas inclure le code JavaScript sur chaque page (il n’est requis que sur 2 pages spécifiques).

Quelle est la meilleure façon de charger cette section de Javascript sur certaines pages de mon application sans dupliquer le code et enfreindre le principe DRY? 

javascriptelixirphoenix-framework
19
Andrew Hendrie

1.

Mettez tout ce javascript de form.html.eex dans son propre fichier (peut-être quelque chose comme js/posts.js ).

Ajoutez ceci en bas:

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

2.

Dans votre app.html , sous <script src="#{static_path(@conn, "/js/app.js")}"></script>, ajoutez ceci:

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

3.

Ensuite, dans votre vue (probablement views/post_view.ex ), ajoutez une méthode comme celle-ci:

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

Conclusion

Maintenant, le fichier javascript post.js ne sera chargé que lorsque la vue de publication est utilisée.

21
cmititiuc

Voici un moyen d'y parvenir.

Le JavaScript que vous avez dans la balise de script, vous le déplacez dans un fichier séparé.

Vous divisez votre javascript "normal" (à inclure dans chaque page) et ce javascript personnalisé (à inclure dans certaines pages spécifiques) dans des répertoires distincts. par exemple. app/common/standard.js et app/custom/unique.js

Vous modifiez votre brunch-config.js comme suit:

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

Ensuite, vous incluez app.js dans toutes les pages, 

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

mais custom.js uniquement dans les modèles de page (ou de mise en page) qui en ont besoin.

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

Une autre méthode consiste à utiliser des classes/éléments spécifiques à une page. Par exemple, le code suivant dans app.js garantira que le code ne sera exécuté que sur la page lesson/show, dans la mesure où seule cette page contient un élément avec l'id #lesson-container:

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

if (document.querySelector('#lesson-container')) {
  startLesson();
}
2
xji
<script src="myscripts.js"></script>

Placez votre code dans un nouveau fichier .js. Incluez la balise de script avec une source dans le chemin de fichier dans les fichiers HTML appropriés.

1
Jake Roby