ruby-on-rails - 使用 ajax、rails 渲染动态 scss 文件

Question

正如标题所暗示的，我的主要目标是在 ajax 调用后呈现动态 scss(.erb) 文件。

Assets /javascripts/header.js

// onChange of a checkbox, a database boolean field should be toggled via AJAX
$( document ).ready(function() {
  $('input[class=collection_cb]').change(function() {

    // get the id of the item
    var collection_id = $(this).parent().attr("data-collection-id");
    // show a loading animation
    $("#coll-loading").removeClass("vhidden");

    // AJAX call
    $.ajax({
      type    : 'PUT',
      url      : "/collections/" + collection_id + "/toggle",
      success : function() {
        // removal of loading animation, a bit delayed, as it would be too fast otherwise
        setTimeout(function() {
          $("#coll_loading").addClass("vhidden");
        }, 300);
      },
    });
  });
});

Controller /collections_controller.rb

def toggle
  # safety measure to check if the user changes his collection
  if current_user.id == Collection.find(params[:id]).user_id
    collection = Collection.find(params[:id])

    # toggle the collection
    collection.toggle! :auto_add_item
  else
    # redirect the user to error page, alert page
  end

  render :nothing => true
end

当我单独切换数据库对象时，一切都非常顺利。

现在我想添加一些额外的香料并更改我 50+ li's 的 CSS根据用户当前选择的集合。

我的 所需的 CSS 看起来像这样，它检查 li 元素是否属于集合，如果是，则给它们一个边框颜色。

ul#list > li[data-collections~='8'][data-collections~='2']
{
  border-color: #ff2900;
}

我将此添加到我的 Controller 以生成 []-conditions :

def toggle
  # .
  # .
  # toggle function

  # return the currently selected collection ids in the [data-collections]-format
  @active_collections = ""
  c_ids = current_user.collections.where(:auto_add_item => true).pluck('collections.id')
  if c_ids.size != 0
    c_ids.each { |id| @active_collections += "[data-collections~='#{id}']" }
  end

  # this is what gets retrieved
  # @active_collections => [data-collections~='8'][data-collections~='2']
end

现在我需要一种方法将这些括号放入动态生成的 scss 文件中。

我尝试添加:

respond_to do |format|
  format.css
end

到我的 Controller ，有文件 View /集合/toggle.css.erb

ul#list<%= raw active_collections %> > li<%= raw active_collections %> {
  border-color: #ff2900;
}

它不起作用，另一种方法是从我的 Controller 渲染 css 文件，然后将其传递给 Manuel Meurer 所述的 View 。

我弄乱了文件名吗？喜欢使用 css而不是 scss ?你对我应该如何进行有任何想法吗？

感谢您的帮助!

为什么是动态 CSS？ - 推理

我知道这通常应该通过 JavaScript 添加类来实现。我为什么需要动态 css 的原因是，当用户决定更改所选集合时，他会非常专注。比如 3 秒内打 4 个电话，然后暂停 5 分钟，然后在 4 秒内打 5 个电话。 JavaScript 循环遍历 50+ li's 所花的时间太长了。每次通话后。

更新

事实证明，JavaScript 在处理我的“长”列表方面非常快……谢谢大家指出我的想法中的错误!

Answer 1

在我看来，您遇到的问题与 CSS 无关；这与你的系统如何工作有关

CSS 是静态加载的(来自 http 请求)，这意味着当页面呈现时，如果您更改服务器上的 CSS 文件，它将不会更新

JS 是客户端，旨在与呈现的 HTML 元素(通过 DOM)交互。这意味着 JS 本质上是动态的，这就是为什么我们可以将它与 Ajax 等技术一起使用来更改页面的某些部分

这就是我认为你的问题出现的地方......

您的 JS 调用不会重新加载页面，这意味着 CSS 保持静态。目前没有办法重新加载 CSS 并让它们在不刷新的情况下呈现(发送 HTTP 请求)。这意味着您对 JS 所做的任何更新都必须包含每个加载的 CSS

根据对您的 OP 的评论，您应该真正考虑更新列表元素的类。如果您使用这样的东西，它应该立即起作用:

$('li').addClass('new');

希望这有帮助吗？