Question

我在show.html.erb页面中有以下脚本，以便更新我的进度条。但是它使用jQuery，并且由于jQuery刚刚在application.html.erb布局的末尾加载，我无法在我的页面上使用它。所以我在脚本代码之前的show.html.erb页面上也要求它。

很明显，这不是正确的做法。我应该把我的脚本代码放在哪里，因为它刚刚加载到这个页面？另一个问题是它使用来自控制器的信息（@batch）。如果我将它移动到我的资源文件夹中的js文件，我该如何访问它？

以下代码位于show.html.erb

的末尾

<%= javascript_include_tag "application" %>

<script type="text/javascript">
function progress(){
    var progress = setInterval(function() {
      var $bar = $('.bar');
      var $pct = $('#pct');
      $.get("<%= @batch.id %>/status.json", function(data){
        if (data.status == "done") {
          location.reload();
        } else {
          $bar.width(data.progress+"%");
          $pct.text(data.progress+"%");
        }
      });
    }, 800);
}

$(document).ready(function() {
  $.get("<%= @batch.id %>/status.json", function(data) {
    if (data.status == "processing") {
      progress();
    }
  });
});
</script>

修改

从现在开始我收到batch_id，我可以检查它是否存在以运行代码：

$(document).ready(function() {
  var batch_id = $("#batch").data("batch-id");
  if (batch_id != null) {
    $.get(batch_id + "/status.json", function(data) {
      if (data.status == "processing") {
        progress();
      }
    });
  }
});

Answer 1

处理此问题的方法是不引人注目的javascript （将您的javascript与html分开）。

首先，移动<%= javascript_include_tag "application" %>文件的<head>部分中的application.html.erb，以便在每个页面上正确加载jquery。

然后，将您的脚本移到资产目录中的js文件中。

要访问@batch.id，请在视图文件（show.html.erb）的数据属性中添加此ID。

<div id="etc" data-batch-id="<%= @batch.id %>"></div>

然后，在你的剧本里面：

var batch_id = $("#etc").data("batch-id")
$.get(batch_id + "/status.json", ...

在Rails中将脚本从页面迁移到js文件

1 个答案: