Rails 资产管道和 Jquery 插件问题答案

【问题标题】：Rails asset pipline and Jquery plugins issueRails 资产管道和 Jquery 插件问题
【发布时间】：2012-06-04 16:07:14
【问题描述】：

我正在使用带有 jquery gem 的 rails。

我的 application.js 中有以下内容

//= require jquery
//= require jquery_ujs
//= require_tree .

这些声明是否按顺序包含文件？

我正在使用 jquery 插件 textareaexpander (http://www.sitepoint.com/blogs/2009/07/29/build-auto-expanding-textarea-1/)

我收到一个 js 错误

jQuery("textarea[class*=expand]").TextAreaExpander();

几乎在插件的最后一行，如下所示

// initialize all expanding textareas
jQuery(document).ready(function() {
  jQuery("textarea[class*=expand]").TextAreaExpander();
})

我不明白？是不是因为 jQuery 尚未加载。为什么 TextAreaExpander 还没有定义？

插件文件中的其余代码供参考。

(function($) {
// jQuery plugin definition
$.fn.TextAreaExpander = function(minHeight, maxHeight) {
var hCheck = !($.browser.msie || $.browser.opera);
// resize a textarea
function ResizeTextarea(e) {
// event or initialize element?
e = e.target || e;
// find content length and box width
var vlen = e.value.length, ewidth = e.offsetWidth;
if (vlen != e.valLength || ewidth != e.boxWidth) {
if (hCheck && (vlen < e.valLength || ewidth != e.boxWidth)) e.style.height = "0px";
var h = Math.max(e.expandMin, Math.min(e.scrollHeight, e.expandMax));
e.style.overflow = (e.scrollHeight > h ? "auto" : "hidden");
e.style.height = h + "px";
e.valLength = vlen;
e.boxWidth = ewidth;
}
return true;
};
// initialize
this.each(function() {
// is a textarea?
if (this.nodeName.toLowerCase() != "textarea") return;
// set height restrictions
var p = this.className.match(/expand(\d+)\-*(\d+)*/i);
this.expandMin = minHeight || (p ? parseInt('0'+p[1], 10) : 0);
this.expandMax = maxHeight || (p ? parseInt('0'+p[2], 10) : 99999);
// initial resize
ResizeTextarea(this);
// zero vertical padding and add events
if (!this.Initialized) {
this.Initialized = true;
$(this).css("padding-top", 0).css("padding-bottom", 0);
$(this).bind("keyup", ResizeTextarea).bind("focus", ResizeTextarea);
}
});
return this;
};
})(jQuery); 

// initialize all expanding textareas
jQuery(document).ready(function() {
jQuery("textarea[class*=expand]").TextAreaExpander();
});

如您所见，TextAreaExpander 函数首先是通过扩展 jQuery 定义的，然后在文档就绪时调用，但仍然无法正常工作。我对其他插件也有类似的问题是 selected.js。

如果有人能指出问题并详细说明是什么原因造成的，因为对我来说这没有任何意义（但显然我在这里遗漏了一点）。

相关代码

development.rb

config.assets.compress = false
config.assets.debug = true

application.rb
config.assets.enabled = true
config.assets.version = '1.0

好的，所以我做了建议检查是否是语法问题的实验，结果不是。

我做了另一个实验，如果我删除该行

//= require_tree .

从 application.js 替换为

//= require_self

在我的视图文件（正在渲染的视图）中，我在末尾添加以下内容

= javascript_include_tag 'libs/jquery.textarea-exapander'

一切似乎都完美无缺。现在有什么想法吗？

更多信息

app/assets/javascript
  |- application.js
  |- chosen.jquery.js
  |- admin/
     |- categories.js.coffee
  |- libs/
     |- jquery.textarea-exapander.js
     |- modernizr.js
     |- platformselector.js
     |- waypoints.js
  |- gmaps4ails/
     |- gmaps4rails.base.js
     |- gmaps4rails.bing.js
     |- gmaps4rails.googlemaps.js

我的应用程序.js

//= require jquery
//= require jquery_ujs
//= require_tree .

我的布局中的代码

%html
  %head
    %title Whatever
    %link{type:"text/css",rel:"stylesheet", href:"http://fonts.googleapis.com/css?family=Abel"}
    = stylesheet_link_tag    "application", :media => "all"
    = stylesheet_link_tag 'gmaps4rails'
    = javascript_include_tag "application"
    = csrf_meta_tags
  %body
    = render 'shared/header'
    %div#main.inside.topadd
      = yield
      %div.wrapper
    =render 'shared/footer'
    = yield :scripts

以上设置无效

以下设置有效

我的应用程序.js

//= require jquery
//= require jquery_ujs

在我的registrations/new.html.haml中

some bla bla bla bla haml code

= javascript_include_tag 'libs/jquery.textarea-exapander'

这可行，如果我在视图之后包含其他插件 selected.js 也是如此，否则它会给出与 .chosen 不是函数相同的错误。

所以从 cmets 看来，我的本地设置有问题

我注意到 heroku 和 local 的 html 中还有一个奇怪的地方

这是heroku上的body类

linux js gecko gecko_20100101 firefox firefox_12_0 firefox_12 gecko_12_0

但在我本地，body 类是

js no-flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths linux gecko gecko_20100101 firefox firefox_12_0 firefox_12 gecko_12_0 js flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths

我也在本地看到了这个我的每个 Rails 应用程序

<div id="cboxOverlay" style="display: none;"></div>
<div id="colorbox" class="" style="padding-bottom: 0px; padding-right: 0px; display: none;"></div>

body 启动后

<div id="supersized-loader"></div>
<div id="supersized"></div>

在正文结束之前到目前为止，我都没有使用包括颜色框...

这是怎么回事？？

谢谢

【问题讨论】：

你把插件的文件放在哪里了？它在 app/assets/javascripts 中吗？还要发布您的 application.rb 以便我们查看您的资产管道是如何设置的，如果合适的话，还发布 environment/development.rb ，其中包含 config.asset* 的任何内容。
我已经用相关代码更新了帖子。是的，我的插件文件在 app/assets/javascripts 中，它们正在页面上加载
浏览器对 js 错误到底说了什么？不是函数？开发那个插件的时候用的是什么版本的jQuery，博文是2009年的，不认识选择器语法，能不能改成JQuery('.expand').TextAreaExpander(); ，只是为了看看它是否是一个选择器语法问题。假设您的页面上只有 class="expand" 的元素是 text_areas。
错误显示 jQuery("textarea[class*=expand]").TextAreaExpander 不是函数。我正在使用 jQuery 版本 1.7.2。我不认为这是版本兼容性的问题。
我正在更新我的帖子，请查看更多信息

标签： jquery ruby-on-rails ruby-on-rails-3 jquery-plugins asset-pipeline

【解决方案1】：

几个小时后想通了。问题不在于我们所有人都在寻找它。

我在本地机器上运行了 nginx，其 conf 指向我的另一个项目，并且公共目录设置为该项目，因此路径 /assets/application.js 由 nginx 直接从另一个项目的 public/assets/ 目录。并且由于另一个项目在 heroku 上，我曾经在 locallay 上预编译资产，因此在正在提供服务的 app/assets 中创建了一个已编译的应用程序是 js。

非常感谢你们的帮助，你们的 cmets 和讨论帮助我发现问题仅出在本地机器上，而我的配置出了问题。

再次感谢

【讨论】：