Rails / JavaScript 在渲染视图之前交换 CSS 类

Rails / JavaScript exchange CSS-Classes before rendering the view

本文关键字：交换 CSS 视图 JavaScript Rails      更新时间：2023-09-26

目前，我正在做一个Rails项目，我使用Bootstrap-Theme（CSS-Files，JavaScript-Files等），我已将其作为Gem包含在rails项目中。

视图中的标记取决于此引导主题。我们在这个项目中包含了其他的 Rails-Engine，这也依赖于这个 Gem 的视图标记。

我们想要做的是开发一个"模板"系统。假设我们有一个定义的框，它有一个标题和一个正文。然后，如果包含引导程序主题，它将附加相应的引导程序标记。如果使用其他主题，则将为此主题附加相应的标记。

现在，如果我们想在未来将引导模板与例如 Zurb-Foundation-Template 交换。然后我们迷失了，因为我们必须重构每个视图，并将类似引导的标记替换为 Zurb 标记。

第一个想法是在JavaScript中开发这个模板，这将改变文档就绪的CSS类，但这不能处理大型DOM树。

是否有任何宝石可用于此目的？如何在Ruby/Rails中实现这样的系统？

提前感谢！

我怀疑你能否找到一个开箱即用的宝石，给你这种功能。基本上，要实现这一点，你需要使用DSL编写所有视图，该DSL可以转换为Bootstrap，Zurb或其他框架。

这个DSL可以在Rails引擎中实现为一系列辅助方法。

例如，您的视图可能如下所示：（假设您使用 ERB 作为模板引擎）

<%= box do %>
  <%= header 'Title of the Box' %>
  <%= body do %>
    <p>Box content here</p>
  <% end %>
<% end %>

这些方法的定义可能如下所示：（伪代码）

def box(options = {})
  case EngineName.config.framework.to_sym
  when :bootstrap
    klass = '..' # the class you want
  when :zurb
    klass = '...' # the class you want
  end
  content_tag(:section, class: klass) { yield }
end

在config/initializers/framework.rb文件中，您可以像这样配置引擎：

EngineName.config.framework = :bootstrap # or :zurb

这种方法有一些优点和缺点。

优点

  • 理论上，您可以切换模板框架，而无需实际更改视图。

缺点

  • 您必须维护一个单独的模板DSL，以便抽象出特定于框架的类名等。这可能非常耗时，尤其是当框架需要非常不同的标记才能获得相同的结果时。如果您没有预见到未来的标记，那么您最终需要更改视图以支持它。

就个人而言，我认为您应该考虑只使用一个框架，而不必担心这一点。您的模板 DSL 不太可能面向未来，因此创建一个模板可能只是不必要的工作。

相关文章：