如何加载JS只是在我的应用程序的一个页面

问题描述 投票:0回答:3

我想要一个js文件加载到我的应用程序的单个页面。但是,这就是所谓的一切,这结束了我的屏幕上产生误差。

我的application.js是:

//= require jquery
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .

我application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Netshow</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

  </head>

  <body>
    <div class='cover-container d-flex w-100 h-100 p-3 mx-auto flex-column'>
      <header class='masthead mb-auto'>
        <%= render 'shared/navbar' %>
      </header>
      <%= yield %>
      <footer class='mastfoot mt-auto'>
        <%= render 'shared/footer' %>
      </footer>
    </div>
  </body>
</html>

我的js文件是:

$(document).on("turbolinks:load", function() {
  console.log('teste')
  var player = videojs('my_video_1');

  var options = {};

  player.on('play', function() {
    $.ajax({
      type: 'POST',
      url:"/video_clicks/",
      dataType: 'json',
      data: {
        video_click: { video_id: window.location.pathname.split('/')[2] }
      },
      success: function(){
        $('span.video-count')[0].innerText = parseInt($('span.video-count')[0].innerText) + 1
      }
    });
  });

  function showCount(){
    var id = window.location.pathname.split('/')[2] 
    $.ajax({
      type: 'GET',
      url:"/video_clicks/"+id,
      dataType: 'json',
      success: function(data){
        console.log($('span.video-count')[0])
        $('span.video-count')[0].innerText = data
      }
    });
  }

  showCount()
});

我想加载只在我的应用程序的一个页面,而不是在所有的js文件。我怎样才能做到这一点?我已经试图消除require_tree在application.html.erb添加内容,并设置在我的HTML文件中的内容,但轨讲,我必须在文件中添加assets.erb进行预编译,当我做到这一点,其他页面重新加载我的js文件。

ruby-on-rails asset-pipeline turbolinks sprockets
3个回答
1
投票

你必须在该方案中多个选项:

  1. 您可以检查application.html.erb的params[:controller]params[:action],如果该特定页控制器+行动,那么只加载JS相匹配。 (更好的解决方案)

喜欢:

<% if params[:controller] == 'your_controller_name' && params[:action] == 'your_action_name' %>
  <%= render partial: 'shared/custom_js' %>
<% end %>

基于上面的这个代码,我会创造我的意见>的共享文件夹命名为custom_js.html.erb一个新的文件。然后写在<script></script>标签内该文件的脚本。此外,您还需要从application.js文件删除脚本文件。

  1. 您可以为特定页面的访问方法不同的布局。像答案here

0
投票

你只需简单地包含页面(ERB文件)与<%= javascript_include_tag 'js_file_name' %>


0
投票

添加到您查看和

<%= javascript_include_tag 'js_file_name' %>

配置/初始化/ assets.rb

Rails.application.config.assets.precompile += %w(js_file_name.js)
© www.soinside.com 2019 - 2024. All rights reserved.