web-dev-qa-db-ja.com

Rails 6を使用して、「ページ固有」のJavaScriptコードをどこに配置しますか？

ここでの私の質問は Rails 3.1を使用しています。「ページ固有の」JavaScriptコードをどこに配置しますか の代わりにRails 6の代わりにRails 3.1。

投稿のインデックスページに使用したいJavaScriptがあるとします。そのファイルはどこに配置し、どのようにインクルードしますか？

前の質問では、回答は通常Railsアセットパイプラインを利用します。ただし、Rails 6を使用すると、JavaScriptファイルのアセットパイプラインの代わりにwebpackerを使用することが理解できます。

注：ファイルにalwaysを含めたくありません。例えば。著者のインデックスページを表示している場合、投稿のインデックスページのJavaScriptファイルを含めたくありません。どうして？投稿のインデックスページのJSファイルに$('li').on('click', changeColor);があるとします。おそらくそのコードを著者のインデックスページで実行したくありませんが、ファイルが含まれている場合は実行されます。名前空間を使用することでこの問題を回避できますが、不要なファイルを含めない方がクリーン（かつパフォーマンスが高い）と思います。

ruby-on-railsruby-on-rails-6webpacker
4
Adam Zerner

私はコーヒースクリプトで質問に答えようと思います。理解するのが良いので、キーはイベント 'turbolinks：load'を使用してコンテンツを確認することですRails新しいメソッドで投稿ページをロードする、ページ基本的にデフォルトではクラス.posts.new

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()

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()

コーヒースクリプトをjsに変換すると、post.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();
  }
});
0
widjajayd