Rails JavaScript 仅在您刷新页面时加载,而不是在原始页面加载时加载,这是怎么回事?

Posted

技术标签:

【中文标题】Rails JavaScript 仅在您刷新页面时加载,而不是在原始页面加载时加载,这是怎么回事?【英文标题】:Rails JavaScript only loads when you Refresh Page, not on the original page load, what's wrong? 【发布时间】:2015-03-01 07:10:09 【问题描述】:

代码在您刷新页面时有效,但在原始加载时无效。

我正在构建的 Pinterest 克隆。 Rails 应用程序 4.1.4。

.

应该发生什么

当您在索引页面中点击 Pin 图时,它会转到 SHOW 页面。 SHOW 页面有一些 JavaScript 可以调整图片/DIV 的大小

.

问题:

几乎每次我从索引页面单击 Pin 图时,javascript 都不会运行(不会调整图像/div 的大小)。

但是如果我使用网络浏览器单击 REFRESH,脚本似乎总是运行得很好(图像/Div 的大小调整得很好)。

.

github上的js链接: https://github.com/growthcode/pinterest/blob/master/app/assets/javascripts/pins.js.coffee

在 Heroku 上试用一下: https://growthcode-pinterest.herokuapp.com/

.

SHOW pin的html:

<div class="container">
  <div class="row">
    <div id="showPinContainer" class="col-xs-12">
      <div id="showPin" class="well">
        <%= image_tag @pin.image, class: "show-image" %>
        <p class="description"><%= @pin.description %></p>
        <p><%= @pin.user.name %></p>
        <% if current_user == @pin.user %>
        <%= link_to 'Edit', edit_pin_path(@pin) %> |
        <% end %>
        <%= link_to 'Back', pins_path %>
      </div>
    </div>
  </div>
</div>

.

我在 rails 上的咖啡脚本中编写了这个,我将列出咖啡脚本和它的“Js2coffee”转换。

咖啡脚本:

# Pin Show page
$ ->
  # set jQuery object variables
  $windowObj = $(window)
  $showPinContainer = $("#showPinContainer")
  $showPin = $("#showPin")
  $showPinImg = $("#showPin img")
  $showPinHeight = $("#showPin").outerHeight()
  $showPinImgWidth = $showPinImg.outerWidth()

  setShowPinContainerHeight = ->
    if $showPinHeight > 450
      $showPinContainer.outerHeight( $showPinHeight )
    else
      $showPinContainer.outerHeight( 450 )

  setShowPinContainerWidth = ->
    if $showPinImgWidth < 200
      $showPinImg.outerWidth( 200 )
    else if $showPinImgWidth > 300 
      $showPinImg.outerWidth( 300 )

  setShowPinContainerSize = ->
    setShowPinContainerHeight()
    setShowPinContainerWidth()

  setShowPinContainerSize()

.

上述咖啡脚本的Js2coffee.com转换:

$(function() 
  var $showPin, $showPinContainer, $showPinHeight, $showPinImg, $showPinImgWidth, $windowObj, setShowPinContainerHeight, setShowPinContainerSize, setShowPinContainerWidth;

  $windowObj = $(window);
  $showPinContainer = $("#showPinContainer");
  $showPin = $("#showPin");
  $showPinImg = $("#showPin img");
  $showPinHeight = $("#showPin").outerHeight();
  $showPinImgWidth = $showPinImg.outerWidth();

  setShowPinContainerHeight = function() 
    if ($showPinHeight > 450) 
      return $showPinContainer.outerHeight($showPinHeight);
     else 
      return $showPinContainer.outerHeight(450);
    
  ;

  setShowPinContainerWidth = function() 
    if ($showPinImgWidth < 200) 
      return $showPinImg.outerWidth(200);
     else if ($showPinImgWidth > 300) 
      return $showPinImg.outerWidth(300);
    
  ;

  setShowPinContainerSize = function() 
    setShowPinContainerHeight();
    return setShowPinContainerWidth();
  ;

  return setShowPinContainerSize();
);

这是我关于 Stack Overflow 的第一个问题,所以如果我还能提供任何其他帮助,请告诉我。谢谢!

【问题讨论】:

是的,就是 Turbolinks。在启动我的第一个 Rails 4+ 应用程序时,我不知道他们是如何工作的。感谢您的帮助。 【参考方案1】:

尝试禁用 Turbolinks。有关更多信息,请参阅Rails Guides documentation on Turbolinks。

【讨论】:

以上是关于Rails JavaScript 仅在您刷新页面时加载,而不是在原始页面加载时加载,这是怎么回事?的主要内容,如果未能解决你的问题,请参考以下文章

Rails 页面仅在刷新后应用

Ruby On Rails:jQuery datepicker 仅在刷新页面时有效

Rails 页面在每次刷新时更改翻译

Rails 仅在生产时才在页面重新加载时丢失会话变量 current_user_id(React 16.13、Rails 6、Heroku)

Jquery 表单仅在您第一次提交时工作,而不是第二次

jQuery 插件 (DataTables) 仅在页面刷新时正确加载