如何使 bootstrap 和 jquery 在具有铁路引擎的 rails 3.2.12 应用程序中协同工作？

Question

我们正在开发具有多个 rails engines 的 rails 3.2.12 应用程序。 main app 中有导航栏和用户菜单。功能模块位于 rails engine。其中engine 之一称为customerx，它使用户能够管理客户信息，例如创建客户、更改客户信息等。

上周我们在 rails_main 应用程序中添加了bootstrap，以利用良好的引导格式。我们发现的问题是 jquery datepicker 和 html 插入功能在 Rails 引擎中停止工作。

这里是main app's application.js：

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .
//= require bootstrap

application.js 中有需要引导。

我们没有在 rails 引擎的 application.js 中加入 require bootstrap。这是引擎的application.js：

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .

function add_fields(link, association, content) {
  var new_id = new Date().getTime();
  var regexp = new RegExp("new_" + association, "g")
  $(link).parent().before(content.replace(regexp, new_id));
}

点击new customer form上的add_more_contact链接时，firebug出现错误：

ReferenceError: add_fields is not defined

在主应用程序中添加引导程序后，engines 也不再工作。

我们在网上做了一些搜索。 bootstrap 需要 jquery 才能工作。但是jquery-ui 和bootstrap 之间可能存在冲突。我们按照建议将require bootstrp 放在main app's application.js 的底部。我们还尝试在main app's application.js 中使用$.noConflict()。然而，这些还不足以让bootstrap 和jquery 一起工作。我们还需要做什么才能使rails engine 中的jquery(ui) 与bootstrap 一起工作？感谢您的帮助。

Answer 1

修复 add_fields

首先让我们修复 add_fields。此函数称为 jQuery($(link))，但定义在全局命名空间中。这就是它不起作用的原因。

要使用全局命名空间中的 jQuery 函数编写函数，您需要将其编写为 jQuery 插件

(function($) {
  $.fn.add_fields = function(link, association, content) {
    var new_id = new Date().getTime();
    var regexp = new RegExp("new_" + association, "g")
    $(link).parent().before(content.replace(regexp, new_id));
  };
}(jQuery));

然后你可以在 jQuery 中使用add_fields()。

引导程序和 jQuery UI

这两个库之间存在一些冲突。你不能在没有任何改变的情况下一起使用它们。

根据您的情况，据我所知，这里有两种解决方案：

1. 完全放弃 jQuery UI 并使用 Bootstrap 的数据选择器。也不错。
2. 使用包含它们两个的经过调整的库，例如 jQuery UI Bootstrap 或 a matching Rails gem 用于此库。

如果您想坚持使用 Bootstrap 并且没有太多需要修改的日期选择器，我更喜欢解决方案 #1。

Answer 2

我们发现rails engines 的assets 根本没有加载。这就是为什么所有 js 功能都不适用于引擎的原因。现在是main app's application.js：

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .
//= require my_engine_name/application.js
//= require bootstrap

这是提供有关如何为 Rails 引擎加载资产的解决方案的帖子：

Engine's assets with Rails 3.1

为什么添加引导程序会导致引擎资产消失，我们还不知道。希望有人可以阐明问题的原因。