Rails中如何在JS生成的Haml div中添加yield标签？

嘿，我懂你的困境——核心问题在于Rails的yield是服务器端渲染的，而你用客户端JavaScript创建的div是页面加载完成后才生成的，这时候服务器早就把页面内容发送完毕，根本没法把yield对应的视图内容注入到JS动态生成的容器里。

给你一个简单直接的解决方案：先让服务器渲染好包含yield的容器，再用JS根据localStorage的值修改这个容器的类，而不是完全用JS创建容器。这样既能利用Rails的服务器端渲染能力，又能实现根据客户端状态切换容器样式的需求。

具体实现代码（Haml） #

#parent-container
  #child-container
    = yield

:javascript
  $(document).ready(function() {
    const childContainer = document.querySelector("#child-container");
    // 推荐用getItem方法获取localStorage属性，比直接下标访问更规范
    const shouldUseFluid = localStorage.getItem("myCondition") === "true";
    
    // 先移除可能存在的类，再添加目标类
    childContainer.classList.remove('container', 'container-fluid');
    childContainer.classList.add(shouldUseFluid ? 'container-fluid' : 'container');
  });

为什么这个方案可行？ #

• 服务器端正常把yield对应的视图内容渲染到#child-container里，保证所有子视图的内容都能正确挂载到容器中
• JS只负责修改容器的CSS类，逻辑简单，不会干扰服务器端的渲染流程
• 完全解决了“客户端生成容器但没法注入服务器端内容”的矛盾

进阶优化：避免页面加载时的样式闪烁 #

如果担心页面加载时容器先显示默认样式，再切换类导致的视觉闪烁，可以先给容器加一个隐藏类，修改完类后再显示：

#parent-container
  #child-container.hidden
    = yield

:javascript
  $(document).ready(function() {
    const childContainer = document.querySelector("#child-container");
    const shouldUseFluid = localStorage.getItem("myCondition") === "true";
    
    // 移除隐藏类和旧的容器类，添加目标类
    childContainer.classList.remove('hidden', 'container', 'container-fluid');
    childContainer.classList.add(shouldUseFluid ? 'container-fluid' : 'container');
  });

对应的CSS（可放在你的样式文件中）：

.hidden { display: none; }

这样页面加载时容器先隐藏，等JS修改完类之后再显示，用户就看不到样式切换的闪烁了。

内容的提问来源于stack exchange，提问作者David Kennell