Question

我正在尝试在Rails 4应用程序中使用SlickGrid，并且无法正常加载某些SlickGrid资产。

最初，我尝试使用SlickGrid-Rails gem，它将SlickGrid内容加载到Assets管道中。但是，事实证明此时宝石与Rails 4不兼容。

所以我去了下载SlickGrid源并开始手动将文件放在我的应用程序中。以下是我执行的设置。

我的文件设置

将所有JavaScript文件放入vendor / assets / javascripts
将所有CSS文件放入vendor / assets / stylesheets
将所有图像文件（.gif，.png等）放置在资产/图像中。

资产设置

在我的application.js文件中，我添加了行::

//= require_tree ../../../vendor/assets/javascripts

在我的application.css文件中，我添加了行::

*= require_tree ../../../vendor/assets/stylesheets

在我的application.rb文件中，我添加了一行::

config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)

构建SlickGrid

在我的视图文件中，我有一个元素::

#my-slick-grid

我的JavaScript文件

$(document).ready(function(){
var rows = [
                {
                    field_1: "value1",
                    field_2: "value2"
                }, {
                    field_1: "value3",
                    field_2: "value4"
                }
            ];

var columns = [
                {
                    name: "Address",
                    field: "address",
                    id: "address",  
                    sortable: true
                }, 
                {
                    name: "Rating, in %",
                    field: "rating", 
                    id: "rating_percent",
                    resizable: false
                }
            ];

var options = [];


var slickgrid = new Slick.Grid($("#my-slick-grid"), rows, columns, options);
});

结果

当视图加载时，我得到了“大部分”表，但它并不完整。 enter image description here

错误

此外，当我查看Chrome控制台时，我会看到以下两个错误::

GET http://localhost:3000/assets/images/header-columns-bg.gif 404 (Not Found)
GET http://localhost:3000/assets/images/ui-bg_glass_75_e6e6e6_1x400.png 404 (Not Found)

因此，显然Rails在加载或知道从哪里获取图像文件时遇到问题。有谁看到我做错了什么？我怀疑也许我没有将SlickGrid文件放在适当的位置。也许有人可以看到我做错了什么并纠正我？

谢谢你的时间！

Answer 1

所以我想通了。

我必须将所有SlickGrid图像文件放入我的应用程序的公共目录中。

然后我必须在每个SlickGrid .css文件上添加.scss扩展名。

然后，在所有SlickGrid .css.scss文件中，我不得不替换所有

url('/assets/images/blahblah.gif')

与

url(asset-path('blahblah.gif'))

现在，当我运行应用程序时，表格已完全绘制，并且不再有404错误。

在Rails 4中为SlickGrid加载资产的问题

1 个答案: