ActiveAdmin Select2 不工作

Question

我正在使用 ActiveAdmin 1.0（当前主控今天更新）。并已从 Chosen 迁移到 Select2。我按照 https://github.com/mfairburn/activeadmin-select2 的指示进行操作，但发现了一些问题。如果我浏览站点上的页面，css 似乎不起作用。但是，如果我在页面上 select 刷新按钮，则会显示 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 吗？我已经清除了缓存和预编译资源。

Answer 1

听起来这不是 CSS 问题，而是 JS 初始化和 turbolinks 的问题。问题出在这行代码上：https://github.com/mfairburn/activeadmin-select2/blob/master/app/assets/javascripts/active_admin/select2/select2.js.coffee#L15 which isn't compatible with Turbolinks, as the document.ready event isn't called when making page transitions - you can read about Turbolink's event lifecycle here: 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 事件）

ActiveAdmin Select2 不工作

ActiveAdmin Select2 not working

ruby-on-rails

sass

activeadmin

jquery-select2