Question

我有Ruby on Rails项目，我使用第三方库（editablegrid）。我将文件放在vendor/assets/javascripts中，并且我已将库包含在布局文件中，以供需要它的视图使用：

<!DOCTYPE html>
<html>
<head>
  <title>Mcf</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'dynamic_collections' %>
  <%= csrf_meta_tags %>
  <%= javascript_include_tag "editablegrid" %>
  <%= javascript_include_tag "editablegrid_editors" %>
  <%= javascript_include_tag "editablegrid_renderers" %>
  <%= javascript_include_tag "editablegrid_utils" %>
  <%= javascript_include_tag "editablegrid_validators" %>
</head>
  <body>


<%= yield %>

</body>

生成的html始终具有editablegrid的<script>标记，但浏览器并不总是加载它。始终可以从javascript_include_tag生成的URL加载js文件。

我注意到js是否加载的模式是，如果我点击指向页面的链接，js将不会加载，除非js已经在同一个选项卡上加载了一次。在地址栏中键入页面的URL或重新编辑页面将加载js。我在Chromium上测试了这种模式。

在Chromium的Elements devtool中，只有editablegrid javascripts没有显示，所有其他js文件似乎都被加载了。

版本：

Ruby 2.2.3p173 (2015-08-18 revision 51636)
Rails 4.2.5
Chromium 47.0.2526.106 Ubuntu 14.04 (64-bit)
Firefox 43.0.4 (Bug is there, didn't test for pattern)

Answer 1

应始终将js放在HTML文件的末尾。由于您使用rails和jquery，您可以告诉您的js代码等待页面加载：

$(document).on('page:load', ready)

并将你的js代码封装在'ready'函数

中

ready = -> ### place your code here

对不起，这是咖啡格式的js代码......

编辑：在以下位置浏览示例：GitHub Editablegrid page

您可以注意到，您将在“ready - ＆gt;”中放置的功能取决于您输入数据的类型。

这是一个将可编辑网格插入HTML表的示例（这不是我的示例，而是演示中的示例）：

 editableGrid = new EditableGrid("DemoGridAttach", { sortIconUp: "up.png", sortIconDown: "down.png"}); 

            // we build and load the metadata in Javascript
            editableGrid.load({ metadata: [
                { name: "name", datatype: "string", editable: true },
                { name: "firstname", datatype: "string", editable: true },
                { name: "age", datatype: "integer", editable: true },
                { name: "height", datatype: "double(m,2)", editable: true },
                { name: "country", datatype: "string", editable: true, values: 
                    { 'Europe': { "be" : "Belgium", "fr" : "France", "uk" : "Great-Britain", "nl": "Nederland"},
                      'America': { "br" : "Brazil", "ca": "Canada", "us" : "USA" },
                      'Africa': { "ng" : "Nigeria", "za": "South-Africa", "zw" : "Zimbabwe" }
                    }
                },
                { name: "email", datatype: "email", editable: true },
                { name: "freelance", datatype: "boolean", editable: true },
                { name: "lastvisit", datatype: "date", editable: true }
            ]});

            // then we attach to the HTML table and render it
            editableGrid.attachToHTMLTable('htmlgrid');
            editableGrid.renderGrid();
        }

` 这是您将在准备功能

中放置的功能

Javascript并不总是加载，但它包含在头部

1 个答案: