How to call a named template

[bufordtaylor]

I'm new to view components. What I'm trying to achieve is this

app/components/list_component.rb
app/components/list_component/standard_card.html.erb
app/components/list_component/compact_card.html.erb
app/components/list_component/standard_row.html.erb
app/components/list_component/compact_row.html.erb

Is there anyway to call the template name directly from list_component.rb?

Something like

class ListComponent < ViewComponent::Base

...other stuff

def call
   render_compact_row if @preference == :compact_row
   render_standard_row if @preference == :standard_row
   render_compact_card if @preference == :compact_card
   render_standard_card if @preference == :standard_card
end

Or do I need to do all this inside of a `list_component.html.erb'?

e.g.

if @preference == :compact_card
<div>compact_card stuff</div>
elsif @preference == :standard_card
...etc

[boardfish]

Hey @bufordtaylor, thanks for opening this! I think what this code is pointing towards is that this markup is different enough to warrant new components for each case. Rather than having the template or component class contain lots of conditionals to switch behaviour, you'll most likely want to break these out into separate components.

If you wanted ListComponent to be the interface folks use to render this component, though, you could make that a factory class:

# Intentionally doesn't inherit from ViewComponent::Base: this is a plain old Ruby factory class.
class ListComponent
  def self.new(preference)
    case preference
    in :compact_row
      CompactRowComponent.new
    in :standard_row
      StandardRowComponent.new
    in :compact_card
      CompactCardComponent.new
    in :standard_card
      StandardCardComponent.new
    end
  end
end

Then you could:

<%= render ListComponent.new(:compact_row) %>

and it'd work, but I'd probably just render them directly anyway:

<%= render CompactRowComponent.new %>

Based on the names you've given these classes, I'd also encourage you to have a look at slots, particularly polymorphic slots, which you could use to specify whether you want to render a compact or standard component in a certain context. Hope this helps!