Select2 JS lib 不适用于 Rails 应用程序

Posted 2023-05-07

【中文标题】Select2 JS lib 不适用于 Rails 应用程序

【英文标题】：Select2 JS lib not working on Rails app

【发布时间】：2019-01-31 04:44:24

【问题描述】：

我收到了这个使用 select2 JS 库的 Rails 应用程序，但无法弄清楚为什么它没有设置我的选择列表的样式。它正在生产中工作。

我从生产服务器的快照创建了一个登台服务器。

我已经运行 rake assets:clobber && rake assets:precompile 成功了。我检查了编译好的 application.js 和 application.css 文件，里面有 JS 代码和样式。

我可以在控制台中运行$(".classIwant").select2();，它会为选择列表设置样式，但当我选择一个选项时它不会做任何事情。

在控制台中运行$(".classIwant").select2(); 后我也收到此错误：

[违规] 执行 javascript 时强制重排耗时 49 毫秒

请原谅我的无知，因为这是我第一次使用这个 JS 库。任何帮助将非常感激。提前致谢。

更新#1： 当我将以下代码复制到控制台并手动运行App.init(); 时，它可以工作。为什么页面加载不出来。

(function() 
  window.App || (window.App = );

  App.init = function() 
    $(".classIwant").select2();
    $('#search').on("keyup", function() 
      return searchTable($(this).val());
    );
    $('#search-list').on("keyup", function() 
      return searchList($(this).val());
    );
    $("#the_id").on('change', function(e) 
      return $(this).parent().submit();
    );
    return $('#preloader').delay(200).fadeOut();
  ;

  $(document).on("page:change", function() 
    return App.init();
  );

  $(window).on("load", function() 
    $('#status').fadeOut();
    return $('#preloader').delay(200).fadeOut();
  );

).call(this);

更新#2： 这是生产代码。这有点不同。我不确定是什么导致编译器缩小生产代码并以不同方式编译它。我在控制台中使用了漂亮的打印来更好地看到它。有什么想法吗？

function() 
    window.App || (window.App = ),
    App.init = function() 
        return $(".classIwant").select2(),
        $("#search").on("keyup", function() 
            return searchTable($(this).val())
        ),
        $("#search-list").on("keyup", function() 
            return searchList($(this).val())
        ),
        $("#the_id").on("change", function() 
            return $(this).parent().submit()
        ),
        $("#preloader").delay(200).fadeOut()
    
    ,
    $(document).on("page:change", function() 
        return App.init()
    ),
    $(window).on("load", function() 
        return $("#status").fadeOut(),
        $("#preloader").delay(200).fadeOut()
    )

.call(this),

【问题讨论】：

选择选项时有错误吗？

当我第一次加载页面时没有错误。当我运行 $(".classIwant").select2(); 时，现在选择了样式。当我单击选择列表时，控制台日志 [Violation] 'mousedown' 处理程序耗时 152 毫秒 [Violation] 执行 JavaScript 时强制重排耗时 43 毫秒

是否正在加载大量数据？还有那些是warnings.. 还有其他原因导致点击什么也没发生..

不，它没有加载大量数据。

然后是您的应用程序中的其他原因导致它，.. 并且 select2 不能作为副作用工作。

【参考方案1】：

我发现问题在于不同的 ruby​​、bundler 和 gem 版本。我不确定是哪个 gem 导致了这个问题，但我通过以下步骤解决了这个问题。您的环境可能会有所不同，但这应该会让您走上正确的道路：

从生产服务器逐行复制 Gemfile 和 Gemfile.lock 到我的本地计算机 在我的本地计算机上，我使用 rvm 安装了与生产版本相同的 ruby​​ (2.2.1)。 使用gem install bundler -v 1.14.0 安装了bundler 1.14.0（1.14.0 是生产服务器上的。） 跑bundle _1.14.0_ install，失败，因为本地mysql是新的 由于我的本地 mysql 版本是新版本，我不得不使用自制软件降级。见Multiple MySQL Versions with Homebrew 再次运行bundle _1.14.0_ install，成功。 由于 Gemfile 现在已更改，因此我提交了这些更改 我 git 将这些更改拉到我的服务器上 暂存服务器 ruby​​ 版本与生产 2.2.1 不匹配 必须在登台服务器上安装 rvm，幸运的是我使用的是 ubuntu，所以我只是使用了这些说明RVM package for Ubuntu。确保遵循终端输出。 通过rvm install 2.2.1 安装了 ruby 在服务器上运行bundle install，成功。所有宝石匹配生产。 在暂存服务器上运行 rake assets:clobber && rake assets:precompile。 已重新启动 Web 服务器。