javascript - 更新操作后 Rails 中的 View 背景

Question

我试图在调用 Controller 操作时更新元素背景图像，但无法弄清楚。在我看来，我有以下标签

<%= link_to '', color_animal_path(@article), method: :post, :id => "animal-image", remote: true %>

单击时，它会调用我的 AnimalsController.rb 中的以下方法

  def color
    respond_to do |format|
      format.js {}
    end
    puts 'color called'
  end

我有一个名为 color.js 的 js 文件，其内容位于 app/assets/javascripts 中

$('#animal-image').css('background-image', 'url("green.jpg")');

元素的 css 看起来像这样

#animal-image {
  float: left;
  width: 28px;
  height: 28px;
  background: grey;
  background: url('red.png') no-repeat;
  background-size: contain;
}

View 使用红色图像正确渲染，单击图像调用 Controller (我可以看到 put 输出)，但是元素背景图像没有更新...我希望有人可以提供帮助，是吗？在正确的 rails 上，我错过了什么吗？

谢谢

Answer 1

UJS 调用有什么特殊原因吗？为什么不在客户端 jQuery 中完成这一切？

即使有原因(例如，颜色需要由服务器动态设置，或者您想跟踪事件)，我建议在客户端单独测试它，直到它正常工作 - 然后重新集成 Rails UJS 组件。

例如，首先为绿色图像添加一个新的 CSS 类:

#animal-image.updated {
  background-image: url('green.png');
}

然后添加一些JS:

$( "#animal-image" ).click(function() {
  $(this).toggleClass('updated');
});

如果一切正常，那么您可以将其全部放回到 color.js 中，然后在浏览器的开发工具中验证响应是否正确返回并且正在对其进行评估。