javascript - 如何在 ruby​​ on Rails 中的 haml 内的 js 设置 session 变量？

Question

我通过 js 有表格行阴影(针对行组)。
我想让它通过 session 变量记住阴影。

我正在使用的 haml 部分有:

Group Shading: 
  %a{:href => '#', :id => 'row_colors_on'}
    On
  %a{:href => '#', :id => 'row_colors_off'}
    Off

js有:

$(function(){
$("a#row_colors_on").click(function(){
$(".row_color_group_1").addClass("color_group_1");
$(".row_color_group_2").addClass("color_group_2");
$(".row_color_group_3").addClass("color_group_3");
<%- session.group_shading = 'true' %>
event.preventDefault();
});
});
$(function(){
$("a#row_colors_off").click(function(){
$(".row_color_group_1").removeClass("color_group_1");
$(".row_color_group_2").removeClass("color_group_2");
$(".row_color_group_3").removeClass("color_group_3");
<%- session.group_shading = 'false' %>
});
});

主页然后使用:

- row_bg_color_group = 'row_color_group_1'
- for link in @links
  - construct_hyperlink(link.url_address, link.alt_text)
  - if link.group.group_name != (current_group ||= '') 
    - display_group = current_group = link.group.group_name
    - row_bg_color_group = rotate_rows_color_group
  - else
    - display_group = ''
   %tr{:class => "#{row_bg_color_group}"}

更改行背景颜色的代码确实可以做到这一点，但在通过 session 变量刷新页面后不会记住它？

与助手:

def rotate_rows_color_group
  if session[:group_shading] == 'true'
    cycle('row_color_group_1', 'row_color_group_2', 'row_color_group_3')
  else
   'row_color_group_1'
  end 
end 

但我总是得到“else”条件，即 session[:group_shading] 未被设置或识别

CSS 是

.color_group_1 { background-color: #133333; }
.color_group_2 { background-color: #122222; }
.color_group_3 { background-color: #111111; }

Answer 1

您不能在 javascript 中使用 erb 语句，它在发送到客户端之前会被解析。而是使用 javascript sessionStorage:

$(function(){
$("a#row_colors_on").click(function(){
$(".row_color_group_1").addClass("color_group_1");
$(".row_color_group_2").addClass("color_group_2");
$(".row_color_group_3").addClass("color_group_3");
sessionStore.setItem('group_shading', true);
event.preventDefault();
});
});
$(function(){
$("a#row_colors_off").click(function(){
$(".row_color_group_1").removeClass("color_group_1");
$(".row_color_group_2").removeClass("color_group_2");
$(".row_color_group_3").removeClass("color_group_3");
sessionStorage.setItem('group_shading', false);
});
});

$(document).ready(function() {
  if (sessionStorage.getItem('group_shading'))
    $("a#row_colors_on").click();
});

重要说明:

但请注意，js session 与 Rails session 不同。 Rails session 可以存储在不同的地方，而 javascript 无法访问它。这意味着您无法在服务器端访问这些值。解决办法有两种:

1) 使用 sessionStorage 并根据页面加载后存储的值执行一些 JavaScript(如上所述)。

2) 不使用 sessionStorage，而是向服务器发送 ajax 请求来填充 Rails session (推荐)。