Необъяснимое поведение с запросом AJAX, включая классы CSS

Question

На странице есть функция выбора некоторых значений для CSS атрибутов класса.

Представление приложения rails имеет блок стилей и элемент div, использующий эти стили:

<style>
  #bg_<%= @promolayout.id %> {
    background-color: <%= @background.first.background_color %>;
    color: <%= @background.first.color %>;
    border-radius: <%= @background.first.border_box_radius %>;   } 
</style>
<div class='grid-x grid-padding-x'>
  <div class='cell small-3' id='bg_<%= @promolayout.id %>'>
    [...]
  </div>
  <div class='cell small-3' id='bg_newrender'>&nbsp;</div>
  </div>

Ниже на странице находятся form_with формы для изменения значений отдельных атрибутов элементов CSS с помощью AJAX. Процесс обновляется, как и ожидалось. В соответствующем файле js для рендеринга есть две строки: одна для отображения нового значения с формой, а другая для отображения (что ожидалось) новой версии блока с новым атрибутом (таким образом, создается представление до и после). ). Вторая строка вызывает:

$("#bg_newrender").html('<%=j (render 'promolayout') %>');

частичное promolayout вызывает те же самые CSS классы

<style>
  #bg_<%= @promocomponent.promolayout_id %> {
    background-color: <%= @background.first.background_color %>;
    color: <%= @background.first.color %>;
    border-radius: <%= @background.first.border_box_radius %>;
  }
</style>

, а div с id='bg_newrender' отображает с обновленным CSS атрибуты, как и ожидалось.

То, что не ожидалось, было то, что начальный div с id='bg_<%= @promolayout.id %>' также рендерится с новыми атрибутами CSS.

У классов одинаковое имя, но у целевого div разные идентификаторы.

Почему объект на странице с другим идентификатором также отображается с обновленными атрибутами класса?

Answer 1

Если вы хотите динамически добавить стили к одному элементу, вместо этого используйте встроенное моделирование .

Обычно мы не одобряем атрибут стиля, поскольку практическим правилом является разделение контента и представления. Но если вы динамически генерируете встроенный тег CSS с помощью ERB, разделение интересов давно исчезло за go, и вы действительно просто напутали из виду.

В ваших Rails Приложением вы захотите написать вспомогательный класс или класс конструктора, который создает тег div с атрибутом style.

Что бы выглядело примерно так:

module PromoHelper
  def promo_component_tag(promo, **opts, &block)
    options = opts.reverse_merge(
      class: 'promo-box', # or whatever
      style: hash_to_inline_style({
        background_color: promo.background_color,
        border_box_radius : promo.border_box_radius,
        color: promo.color
      })
    )
    content_tag :div, options, &block
  end

  private
  def hash_to_inline_style(hash)
    hash.map do |k,v|
      "#{k.to_s.dasherize}: #{v};"
    end.join
  end
end

Это очень упрощенный пример, и его необходимо адаптировать к вашему варианту использования.

И затем вы вызываете его ваше представление:

<% @promotions.each do |p| %>
  <%= promo_component_tag(promo) do %>
    # ...
  <% end %>
<% end %>

Когда дело доходит до обработки фактического взаимодействия с пользователем, вы можете либо отправить форму, и Rails повторно отобразит представление и заменить содержимое в DOM, либо вы можете использовать element.style или jQuery.css для оптимистического изменения стиля на лету и просто отправьте вызов AJAX в фоновом режиме, чтобы обновить значения базы данных. Последнее даст гораздо более резкое ощущение и хорошо вписывается, если вы хотите позволить пользователям предварительно просмотреть изменения.