Integrating Rails Views or Partials

Matestack rails_render component offers the possibility to render a view or partial by passing its name and required params to it.
Components reusing partials
Imagine the partial app/views/products/_teaser.html.erb containing following content:
1
<%= link_to product_path(product), class: 'product-teaser' do %>
2
  <div>
3
    <h2><%= product.name %></h2>
4
    <p><%= product.description %></p>
5
    <b><%= product.price %></b>
6
  </div>
7
<% end %>
Copied!
1
class Components::Products::Trending < Matestack::Ui::Component
2
​
3
  def prepare
4
    @products = Product.where(trending: true)
5
  end
6
​
7
  def response
8
    h1 'Trending products'
9
    @products.each do |product|
10
      rails_render partial: '/products/teaser', locals: { product: product }
11
    end
12
  end
13
​
14
end
Copied!
As you see, we used the rails_render component here to render our products teaser partial. Given the string rails searches for a partial in app/views/products/_teaser.html.erb. As our product teaser partial uses a product we pass in a product as a local.
rails_render works with ERB, Haml and Slim Templates, as long as you have installed and configured the desired templating engine correctly in your Rails app.
Components reusing views
As mentioned above the rails_render component can not only render partials but also views. Following Rails view can be reused within a Matestack component:
app/views/static/index.html.erb
1
<main>
2
  <%= render partial: 'products/teaser', collection: products, as: :product %>
3
</main>
4
​
5
<div>
6
  <%= link_to 'All products', products_path %>
7
</div>
Copied!
1
class Components::Products::Index < Matestack::Ui::Component
2
​
3
  def prepare
4
    @products = Product.where(trending: true)
5
  end
6
​
7
  def response
8
    rails_render template: '/static/index', locals: { products: @products }
9
  end
10
​
11
end
Copied!

HTML Rendering - Previous

Integrating Action View Helpers

Next - Components

API

Last modified 3mo ago

Copy link

Edit on GitHub

Contents

Components reusing partials

Components reusing views