Question

我正在使用： Ruby版本：2.2 Rails版本：4.2

我试图在JavaScript方面使用资产管道，我理解并有工作样式表，但我不能将我的js与我的观点分开。

示例：

// view.html.erb 
<body> 
  <div id="slider"></div> 
</body> 


// assets/javascript/slider.js
$( "#slider" ).slider({
  min: 0,
  max: 10000,
  value: 0,
  slide: function( event, ui ) {
    $( "#SolarAmount" ).val(ui.value + " sq. ft.");
  }
});

但滑块无处可寻。但是，如果我在view.html.erb中包含该函数，它将按预期工作。如果有人可以提供关于管道如何使用javascript的一些建议，我将非常感谢帮助！

Answer 1

一般来说，您应该几乎总是在jQuery ready函数中包含该类型的代码。如果javascript位于文档的顶部，它将在div存在之前执行。

jQuery ready函数在DOM完全加载时执行代码。 99％的时间，这是你想要的。

例如，您需要这样做：

$(function() {
  $( "#slider" ).slider({
    min: 0,
    max: 10000,
    value: 0,
    slide: function( event, ui ) {
      $( "#SolarAmount" ).val(ui.value + " sq. ft.");
    }
  });
});

请确保您在模板中包含应用程序javascript文件，正如Mario建议的那样。假设您正在使用jquery-rails gem，您的application.js应如下所示：

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

同样，您需要确保在目录（require_tree .）中的所有其他js文件之前包含jQuery。

Answer 2

确保您在application.js文件中导入app/views/layout/application.html.erb文件。

它应该有这一行：<%= javascript_include_tag "application", "data-turbolinks-track" => true %>

还要确保您的app/assets/javascripts/application.js文件已正确设置（最有可能）

Answer 3

如果您要使用Turbolinks，则可能需要将js代码放入Turbolinks ready函数中。

类似这样的东西：

$(document).on("turbolinks:load", function(){
  $( "#slider" ).slider({
    min: 0,
    max: 10000,
    value: 0,
    slide: function( event, ui ) {
      $( "#SolarAmount" ).val(ui.value + " sq. ft.");
    }
  });
});

当您刷新页面时看到js起作用，而当您从应用程序中的另一页面导航时却没有看到js时，您会知道您是否在与Turbolink对抗。

如何将视图中的脚本移动到Ruby On Rails中的单独js文件？

3 个答案: