Rails 7中如何将Ruby代码与JavaScript结合使用？

有两种简洁的方式可以实现将Ruby的session[:post]变量传递给模板中的JavaScript：

方法一：直接在ERB中注入变量值 #

ERB是服务器端渲染模板，你可以直接在<script>标签内用ERB标签输出session[:post]的布尔值，注意要转换为JavaScript能识别的格式：

修改app/views/posts/index.html.erb中的脚本部分：

<script>
    // 用to_json确保输出JS原生的布尔/空值格式
    const hasPosts = <%= session[:post].to_json %>;
    if(hasPosts){
       console.log("All Posts has been loaded successfully.")
    }
</script>

to_json会自动处理session[:post]为nil的情况（输出null，在JS条件判断中会被视为false），同时把Ruby的布尔值转为JS原生的true/false。

方法二：通过DOM的data属性传递 #

如果想保持JS与Ruby代码的分离，可以把session[:post]的值存在DOM元素的data属性中，再用JavaScript读取：

1. 给posts容器添加data属性：

<div id="posts" 
     data-controller="like" 
     data-like-url-value="<%= like_posts_path %>"
     data-has-posts="<%= session[:post] ? 'true' : 'false' %>">
    <!-- 现有内容 -->
</div>

2. 在脚本中读取该属性：

<script>
    const postsContainer = document.getElementById('posts');
    // 将字符串值转换为JS布尔值
    const hasPosts = postsContainer.dataset.hasPosts === 'true';
    if(hasPosts){
       console.log("All Posts has been loaded successfully.")
    }
</script>

两种方法都能满足需求，第一种更直接，第二种更符合无侵入式JavaScript的设计思路，适合复杂场景。

内容的提问来源于stack exchange，提问作者Rahul Gupta