将flexslider手动添加到Rails 4应用程序中 - 类型错误flexslider不是函数

Question

我试图修复Rails 4应用程序中的错误。 我的应用程序flexslider不工作，根本没有图像加载。在控制台中显示 - TypeError (..).flexslider不是函数 当它未集成到Rails中时，该主题完全正常。 它基于自举的主题，具有以下CONFIGS - 的application.css.scss文件看起来像下面

*= require_self 
*= require font-config 
*= require framework_and_overrides 
*= require animate 
*= require flexslider 
*= require site-wide 

有关的application.js文件中有如下 -

//= require jquery 
//= require jquery_ujs 
//= require turbolinks 
//= require bootstrap-sprockets 
//= require flexslider 
//= require cbpAnimatedHeader 
//= require jqueryeasing 
//= require jquerymousewheel 
//= require classie 
//= require scrollpage 
//= require site 

试图改变它们的顺序不少次，但没有效果。 滑块被初始化通过以下方式 -

$(document).ready(function() { 
$('#myCarousel').flexslider({ 
     animation: "fade", 
     directionNav: false, 
     controlNav: false //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage 

    }); 
    $('#slider').flexslider({ 
     animation: "fade", 
     directionNav: true 
    }); 
    }); 

我是Rails的初级，请扔掉一些有识之士，一直在努力解决这个问题的最后几个小时。

谢谢你的时间。

更新：我使用Daniel Kehoe使用作曲家的RailsApps入门应用程序。

更新：我没有安装flexslider使用任何宝石，因为我在rubygems网站上找到的宝石使用的是旧版本，即。 flexslider 2.2和我使用2.4。

所以我想手动做。

Answer 1

Okie，它的我第一次整合了轨道环境之外，比集成到它开发出了基于引导的主题。 这里就是我如何解决这个问题 在的application.js文件（清单文件），我已经在上面添加

//= require_self 象下面这样：

//= require_self 
//= require jquery 
//= require jquery_ujs 
//= require turbolinks 
//= require bootstrap-sprockets 
//= require flexslider 
//= require cbpAnimatedHeader 
//= require jqueryeasing 
//= require jquerymousewheel 
//= require classie 
//= require scrollpage 
//= require site 

将其放置在//= require jquery和//= require turbolinks之间 任何地方使我的滑块，甚至引导模式无法正常工作。所以经过很多尝试我发现，它必须是最重要的。

我怎么知道，几乎每次我昨天查看源代码时，我都忽略了应用程序 - [内容哈希] .js，它位于清单文件中提到的所有js文件的下面。

今天，我想可能是这个文件正在创建这个问题，并且因为文件名是application- [content hash]。js我使用//= require_self来适应它在文件本身硬编码的位置。 我没有意识到js的//= require_self东西，因为我发现它只在css清单文件中提到过，可能是，因为我的Rails 4.2只有5-6个月的历史。所以资深的rails开发人员可能有更好的方法来做到这一点。

如果任何人都可以改进答案或投入更多的光线，我将不胜感激。

感谢 **更新 - Okie这里是另一回事，我发现，我使用的是启动应用程序由丹尼尔·基欧使用作曲工具，它的公共文件夹，使用require_self指令时得到了包含在预编译包含资产。

Answer 2

应该是

*= require jquery.flexslider 

代替

*= require flexslider 

有两种宝石flex slider & flexslider-rails：两人都包括JavaScript的方式相同。请参阅您正在使用的文档。

https://github.com/constantm/Flexslider-2-Rails-Gem#usage https://github.com/werein/flexslider-rails#usage

Answer 3

好吧，它也花了我一段时间才弄清楚，但现在令人惊讶。

第1步：从这里

下载源代码：http://flexslider.woothemes.com/thumbnail-controlnav.html

STEP 2：

然后，得到三个文件如下：

1. /demo/css/flexslider.css 
2. /fonts  //yes, copy this entire folder that contains four files 
3. /demo/js/jquery.flexslider.js 

STEP 3：

重新定位供应商/资产/风格内的前两个文件（1和2） lesheets， ，最后一个（3）的厂商/资产/ Javascript角内

步骤4：

包括在application.css/SASS顶部：

*= require flexslider 

和包括在的application.js ：

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

SETP 5：

放置下面内部APPLI cation.js

$(window).load(function() { 
    $('.flexslider').flexslider({ 
    animation: "slide" 
    }); 
}); 

然后你得到基本的滑块。 如果您想获得其他滑块类型，只需将STEP 5 javascript代码更改为您在此处看到的任何内容：http://flexslider.woothemes.com/index.html