En utilisant Rails 6, où placez-vous votre code JavaScript "spécifique à la page"?

Question

Ma question ici est la même que en utilisant Rails 3.1, où mettez-vous votre code JavaScript "spécifique à la page"? , juste pour Rails 6 au lieu de Rails 3.1.

Supposons que j'ai du JavaScript que je veux utiliser pour ma page d'index de messages. Où dois-je mettre ce fichier et comment l'inclure?

Dans la question précédente, les réponses utilisent généralement le pipeline de ressources Rails. Cependant, avec Rails 6, je crois comprendre qu'il utilise webpacker au lieu du pipeline d'actifs pour les fichiers JavaScript.

Remarque: je ne veux pas que le fichier soit toujours inclus. Par exemple. si je suis sur la page d'index des auteurs, je ne veux pas que le fichier JavaScript de la page d'index des articles soit inclus. Pourquoi? Imaginez que j'ai $('li').on('click', changeColor); dans le fichier JS pour la page d'index des articles. Je ne veux probablement pas que ce code s'exécute sur la page d'index des auteurs, mais il le sera si le fichier est inclus. Vous pouvez contourner ce problème en utilisant l'espace de noms, mais je pense qu'il serait plus propre (et plus performant) de ne pas inclure les fichiers inutiles.

Answer 1

Je vais essayer de répondre à votre question avec un script café car c'est mieux pour la compréhension, la clé utilise l'événement 'turbolinks: load' pour vérifier le contenu si Rails charge la page de publication avec une nouvelle méthode, la page essentiellement par défaut aura la classe .posts.new

dans votre app.post.coffee

class App.Post
  render: ->
    console.log "Post Edit / new render"
    console.log "all this script below will only run"
    console.log "if you open Post with new or edit method"

$(document).on "turbolinks:load", ->
  if $(".posts.new")[0] || $(".posts.edit")[0]  
    post = new App.Post
    post.render()

dans votre app.author.coffee

class App.Author
  render: ->
    console.log "Author Edit / newrender"
    console.log "all this script below will only run"
    console.log "if you open Author with new or edit method"

$(document).on "turbolinks:load", ->
  if $(".authors.new")[0] || $(".authors.edit")[0]  
    author = new App.Author
    author.render()

et voici post.js si je convertis mon script café en js

App.Post = class Post {
  render() {
    console.log("Post Edit / new render");
    console.log("all this script below will only run");
    return console.log("if you open Post with new or edit method");
  }

};

$(document).on("turbolinks:load", function() {
  var post;
  if ($(".posts.new")[0] || $(".posts.edit")[0]) {
    post = new App.Post;
    return post.render();
  }
});