Matestack Ui Core
AboutMatestack Ui CoreMatestack Ui VueJsMatestack Ui Bootstrap
2.1
2.1
  • Welcome
  • Migrating from 1.x to 2.0
  • Getting started
    • Installation & Update
    • Concepts & Rails Integration
    • Tutorial
    • Support & Feedback [WIP]
    • Common Issues [WIP]
  • HTML implemented in pure Ruby
    • Overview
    • HTML Rendering
    • Components
      • Component API
      • Component Registry
      • Components on Rails views
    • Pages
      • Page API
      • Rails Controller Integration
    • Apps
      • App API
    • Reusing Rails Views or Partials
  • Built-in Reactivity composed in pure Ruby
    • Overview
    • Emit Client Side Events
      • Onclick Component API
    • Toggle UI States
      • Toggle Component API
    • Call Server Side Actions
      • Overview
      • Action Component API
    • Reactive Forms
      • Overview
      • Form Component API
      • Input Component API
      • Textarea Component API
      • Checkbox Component API
      • Select Component API
      • Radio Component API
      • Nested Forms
    • Partial UI Updates
      • Overview
      • Async Component API
      • Cable Component API
      • Isolated Component API
    • Page Transitions
      • Overview
      • Transition Component API
    • Reactive Collections
      • Overview
      • Collection Component API [WIP]
  • Custom Reactivity implemented in Vue.js
    • Custom Vue.js Components
    • Third party Vue.js components [WIP]
    • Matestack's Vue.js APIs [WIP]
    • Matestack's Vuex API [WIP]
  • Integrations
    • Action Cable
    • Devise
    • Authorization [WIP]
    • CSS Frameworks [WIP]
    • Third Party JavaScript [WIP]
    • Third Party Ruby Gems [WIP]
  • Matestack Addons
    • Create your own Addon [WIP]
  • Testing
    • Capybara & Rspec
  • Community
    • Discord
    • Contribute [WIP]
  • About
    • Core Team
    • Sponsoring [WIP]
    • Legal Details [WIP]
Powered by GitBook
On this page
  • Components reusing partials
  • Components reusing views

Was this helpful?

Edit on GitHub
  1. HTML implemented in pure Ruby

Reusing Rails Views or Partials

Matestack rails_render component offers the possibility to render a view or partial by passing it's name and required params to it

Components reusing partials

Imagine the partial app/views/products/_teaser.html.erb containing following content:

<%= link_to product_path(product), class: 'product-teaser' do %>
  <div>
    <h2><%= product.name %></h2>
    <p><%= product.description %></p>
    <b><%= product.price %></b>
  </div>
<% end %>
class Components::Products::Trending < Matestack::Ui::Component

  def prepare
    @products = Product.where(trending: true)
  end

  def response
    h1 'Trending products'
    @products.each do |product|
      rails_render partial: '/products/teaser', locals: { product: product }
    end
  end

end

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

<main>
  <%= render partial: 'products/teaser', collection: products, as: :product %>
</main>

<div>
  <%= link_to 'All products', products_path %>
</div>
class Components::Products::Index < Matestack::Ui::Component

  def prepare
    @products = Product.where(trending: true)
  end

  def response
    rails_render template: '/static/index', locals: { products: @products }
  end

end
PreviousApp APINextOverview

Last updated 3 years ago

Was this helpful?