Obviously, this doesn’t work – the whole block just gets repeated. But is there a way to make it behave as expected, ideally without manually passing the content in pieces?<\/p>\n
Why This Doesn’t Work:<\/h2>\n
Ruby blocks are not generators.<\/strong> When you yield, Ruby calls the entire block – it doesn\u2019t pause and resume like JavaScript’s yield or Python’s yield in generators.<\/p>\n So yielding multiple times simply re-renders the full block<\/strong> each time.<\/p>\n You can simulate multiple-yield behavior by splitting your content manually into named lambdas and passing them to your component:<\/p>\n Usage:<\/strong><\/p>\n Clean and reusable.<\/strong> Great if your component needs to handle dynamic regions or slots.<\/p>\n This is a clean Phlex-friendly pattern: let the block yield the component itself, so users can call methods like content at specific points.<\/p>\n Component:<\/strong><\/p>\n Usage:<\/strong><\/p>\n This keeps your components tidy and gives callers full control over when to render specific bits of UI.<\/p>\n For Rails + ERB users, you can pre-capture content and pass it to your component:<\/p>\n Component:<\/strong><\/p>\n Usage:<\/strong><\/p>\n Only use unsafe_raw if you’re confident the content is safe from injection.<\/p>\n Use yield(self) and let the caller insert helper methods inside the block.<\/p>\n This gives the developer the flexibility to insert your reusable bits (span, content, etc.) at any point<\/strong>, while keeping a very readable and testable API:<\/p>\n It’s concise, scalable, and aligns with how Ruby and Phlex both operate.<\/p>\n <\/p>\n While Ruby blocks can\u2019t pause and resume like generators, Phlex gives you enough flexibility to work around it elegantly. Whether you use lambdas, yield the component, or go with slots, you\u2019ve got great tools to keep your view logic clean and composable.<\/p>\n If you’re building something more advanced like modal slots, tabs, or layout wrappers, consider building on the “named lambda” or yield(self) pattern, they scale really well.<\/p>\nSolution 1: Split the Content Using Named Blocks<\/h2>\n
class Component < Phlex::HTML\r\n def initialize(first:, last:)\r\n @first = first\r\n @last = last\r\n end\r\n\r\n def template\r\n div do\r\n instance_exec(&@first)\r\n span { \"component\" }\r\n instance_exec(&@last)\r\n end\r\n end\r\nend\r\n<\/pre>\n<%= render Component.new( first: -> { div { \"foo\" } },\r\n last: -> { div { \"bar\" } }\r\n) %>\r\n<\/pre>\nSolution 2: Yield self and Call Helper Methods Inside the Block<\/h2>\n
class Component < Phlex::HTML\r\n def template\r\n div do\r\n yield(self)\r\n end\r\n end\r\n\r\n def content\r\n span { \"component\" }\r\n end\r\nend\r\n<\/pre>\n<%= render Component.new do |c| %>\r\n
Solution 3: Use capture and unsafe_raw in ERB (Rails Only)<\/h2>\n
class Component < Phlex::HTML\r\n def initialize(first:, last:)\r\n @first = first\r\n @last = last\r\n end\r\n\r\n def template\r\n div do\r\n unsafe_raw @first\r\n span { \"component\" }\r\n unsafe_raw @last\r\n end\r\n end\r\nend\r\n<\/pre>\n<% first = capture do %>\r\n
My Recommended Solution<\/h2>\n
class Component < Phlex::HTML\r\n def template\r\n div do\r\n yield(self)\r\n end\r\n end\r\n def content\r\n span { \"component\" }\r\n end\r\nend\r\n<\/pre>\nSummary Table<\/h2>\n
\n\n
\n Approach<\/b><\/td>\n Multiple Content Points<\/b><\/td>\n Phlex DSL Friendly<\/b><\/td>\n Readability<\/b><\/td>\n Comments<\/b><\/td>\n<\/tr>\n \n Multiple yields to same block<\/td>\n \u274c (Repeats content)<\/td>\n \u2705<\/td>\n \u2705<\/td>\n Not recommended<\/td>\n<\/tr>\n \n Named lambdas<\/td>\n \u2705<\/td>\n \u2705<\/td>\n \u2705<\/td>\n Best for slots-style API<\/td>\n<\/tr>\n \n capture + unsafe_raw<\/td>\n \u2705<\/td>\n \u26a0\ufe0f<\/td>\n \u26a0\ufe0f<\/td>\n Rails-only, careful with safety<\/td>\n<\/tr>\n \n yield(self) + helper method<\/td>\n \u2705<\/td>\n \u2705<\/td>\n \u2705\u2705<\/td>\n \u2705 Recommended<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Final Thoughts<\/h2>\n
![\"Also](\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/04\/24061434\/read-txt.png\")