ActiveAdmin Select2 不工作答案

【问题标题】：ActiveAdmin Select2 not workingActiveAdmin Select2 不工作
【发布时间】：2015-10-29 01:28:44
【问题描述】：

我正在使用 ActiveAdmin 1.0（今天更新的当前主版本）。并已从 Chosen 迁移到 Select2。我按照https://github.com/mfairburn/activeadmin-select2 的指示进行操作，但我注意到了一些问题。如果我浏览网站上的页面，css 似乎无法正常工作。但是，如果我在页面上并选择刷新按钮，则会显示 Select2 css。

active_admin.js.coffee

#= require active_admin/base
#= require chosen-jquery
#= require_tree ./active_admin
#= require_tree .
#= require active_admin/select2

active_admin.css.scss

// SASS variable overrides must be declared before loading up Active Admin's styles.
//
// To view the variables that Active Admin provides, take a look at
// `app/assets/stylesheets/active_admin/mixins/_variables.css.scss` in the
// Active Admin source.
//
// For example, to change the sidebar width:
// $sidebar-width: 242px;

// Active Admin's got SASS!
@import "active_admin/mixins";
@import "active_admin/base";
//@import "chosen";
//@import "active_admin/chosen";


//body.active_admin {
  @import "active_admin/select2/base";
//}
// Overriding any non-variable SASS must be done after the fact.
// For example, to change the default status-tag color:
//
//   .status_tag { background: #6090DB; }

任何想法为什么我必须刷新每个页面才能加载 css？我已清除缓存和预编译资产。

【问题讨论】：

标签： ruby-on-rails sass activeadmin jquery-select2

【解决方案1】：

听起来这不是 CSS 问题，而是您的 JS 初始化和 turbolinks 的问题。问题在于这行代码：https://github.com/mfairburn/activeadmin-select2/blob/master/app/assets/javascripts/active_admin/select2/select2.js.coffee#L15，它与 Turbolinks 不兼容，因为在进行页面转换时不会调用 document.ready 事件 - 您可以在此处阅读有关 Turbolink 事件生命周期的信息：https://github.com/rails/turbolinks#events

我的建议是通过在您自己的应用程序树中创建一个包含此代码的assets/javascripts/active_admin/select2/select.coffee 来覆盖我上面链接的文件：

'use strict';

initSelect2 = (inputs, extra = {}) ->
  inputs.each ->
    item = $(this)
    # reading from data allows <input data-select2='{"tags": ['some']}'> to be passed to select2
    options = $.extend(allowClear: true, extra, item.data('select2'))
    # because select2 reads from input.data to check if it is select2 already
    item.data('select2', null)
    item.select2(options)

$(document).on 'has_many_add:after', '.has_many_container', (e, fieldset) ->
  initSelect2(fieldset.find('.select2-input'))

$(document).on 'ready page:load', ->
  initSelect2($(".select2-input"), placeholder: "")
  return

（注意使用 Turbolink 的page:load 事件）

【讨论】：