Matestack Ui Core
AboutMatestack Ui CoreMatestack Ui VueJsMatestack Ui Bootstrap
1.5
1.5
  • Welcome
  • Getting started
    • Installation & Update
    • Concepts & Rails Integration
    • Quick Start
    • Support & Feedback [WIP]
    • Common Issues [WIP]
  • UI Components
    • Component Overview
    • Rails Integration
    • Component Registry
    • General Component API
    • Haml Components
    • Reusing Views or Partials
    • Testing [WIP]
  • Reactivity
    • Reactivity Overview
    • Rails Integration
    • Actions
    • Forms
    • Async
    • Cable
    • Isolated
    • Collection
    • Custom Vue.js Components
    • Vue.js Event Hub
    • Vuex [WIP]
  • SPA-like Apps
    • SPA Overview
    • Rails Integration
    • App API
    • Page API
    • Transitions
    • Authorization
    • Tutorial
      • Creating a SPA-like App with Matestack
      • Essential Guide 1: Setup
      • Essential Guide 2: ActiveRecord & Database
      • Essential Guide 3: Person Index, Show, Transition
      • Essential Guide 4: Forms & Actions (Create, Update, Delete)
      • Essential Guide 5: Toggle Component
      • Essential Guide 6: Async Component
      • Essential Guide 7: Partials and custom components
      • Essential Guide 8: Collection and async component
      • Essential Guide 9: Custom Vue.js components
      • Essential Guide 10: Styling and Notifications
      • Essential Guide 11: Authentication
      • Essential Guide 12: Heroku Deployment with Postgres
      • Essential Guide 13: Wrap Up & Outlook
  • Components API
    • Core Components
      • Abbr
      • Address
      • Area
      • Article
      • Aside
      • B
      • Bdi
      • Bdo
      • Blockquote
      • Button
      • Br
      • Caption
      • Cite
      • Code
      • Data
      • Datalist
      • Dd
      • Del
      • Details
      • Dfn
      • Dialog
      • Div
      • Dl
      • Dt
      • Em
      • Fieldset
      • Figure
      • Footer
      • Hr
      • Icon
      • Iframe
      • Img
      • Ins
      • Input
      • Header
      • Heading
      • Kbd
      • Label
      • Legend
      • Link
      • Lists
      • Main
      • Mark
      • Map
      • Meter
      • Nav
      • Noscript
      • Object
      • Option
      • Optgroup
      • Output
      • Paragraph
      • Param
      • Picture
      • Pg
      • Plain
      • Pre
      • Progress
      • S
      • Samp
      • Section
      • Select
      • Small
      • Span
      • Sup
      • Sub
      • Strong
      • Table
      • Template
      • Textarea
      • U
      • Unescaped
      • Q
      • Rails View
      • Rp
      • Rt
      • Ruby
      • Var
      • Video
      • Wbr
      • Youtube
    • Reactive Core Components
      • Action
      • Async
      • Cable
      • Collection
      • Form
      • Form Input
      • Form Checkbox
      • Form Radio
      • Form Select
      • Form Submit
      • Form Textarea
      • Onclick
      • Transition
      • Toggle
  • Integrations
    • Action Cable
    • Devise
    • CSS Frameworks [WIP]
    • Third Party JavaScript [WIP]
    • Third Party Ruby Gems [WIP]
  • Matestack Addons
    • Create your own Addon [WIP]
  • Community
    • Discord
    • Contribute
  • About
    • Core Team [WIP]
    • Sponsoring [WIP]
    • Legal Details [WIP]
Powered by GitBook
On this page
  • Parameters
  • view (optional)
  • partial (optional)
  • Example 1 - Using Rails View and Partial on a page, component or app
  • Example 2 - Using Rails View in a view
  • Example 3 - Passing and accessing data

Was this helpful?

Edit on GitHub
  1. Components API
  2. Core Components

Rails View

Use your Rails views or partials with this component in your views, matestack pages, components or apps.

Parameters

This component expects that either view or partial is given as parameter.

view (optional)

Expects a string, specifying the path of the view that should be rendered by the component. The path resolution works like Rails render 'your_path' path resolution.

partial (optional)

Expects a string, specifying the partial that should be rendered by the component. The path resolution works like Rails render partial: 'your_path' path resolution.

Example 1 - Using Rails View and Partial on a page, component or app

class WelcomePage < Matestack::Ui::Page
  def response
    rails_view view: 'welcome/header'
    rails_view partial: 'welcome/hero'
    heading text: 'Welcome', size: 1
  end
end

The above page will first render your 'welcome/header' view. If for example you use erb templates, it will render your app/views/welcome/header.html.erb view. And secondly it will render your 'welcome/hero' partial. Again, if you use erb templates, it will render your app/views/welcome/_hero.html.erb partial. The usage of rails_view is the same on a page, component or app.

Example 2 - Using Rails View in a view

You can also use rails_view in another view

<%= matestack_component(:rails_view, view: 'welcome/header') %>
<%= matestack_component(:rails_view, partial: 'welcome/hero') %>

Example 3 - Passing and accessing data

You can access all your instance variables from your controller action within a view or partial rendered by rails_view. You can also pass data explicitly. Just add them to the hash you pass to the rails_view call. You can access those like you would do if you pass locals to a rails view or partial.

Your rails_view call:

rails_view view: 'welcome/header', headline: 'Great to see you!'

and in your rails view you can access your data as follows:

<h1><%= headline %></h1>
PreviousQNextRp

Last updated 3 years ago

Was this helpful?