简体   繁体   中英

how to render partial without variable with turbo

I search trough internet, but I only find 'how to render partial after update' etc. For now I click on the image, page is refereshing and partial appear. But this refreshing part is... not good for me, so I wonder.. Can I render partial (or replace if I rendered one already) with Turbo?

Ruby version: 3.0.4 Rails version: 6.1.6

My view:

 .container.flex.flex-col.mx-auto.w-full.py-16
  .text-center
    %h1.text-2xl.font-extrabold.text-gray-700.md:text-4xl
      = t('pages.partners.title')
    %p.mt-2.md:text-xl
      = t('pages.partners.subtitle')
    %h2.my-6.text-xl.font-extrabold.text-gray-700.md:text-2xl
      = t('pages.partners.foreign_partners')
  .grid.grid-cols-5.gap-x-4
    = link_to partners_path(foreign_partner: '2'), class: 'border-2 border-black transform hover:-translate-y-1 hover:scale-110' do
      .flex.h-full.w-full
        = image_tag '/partners/logo2.png', size: '100x100', class: 'h-full w-full p-1 object-scale-down'
    = link_to partners_path(foreign_partner: '1'), class: 'border-2 border-black transform hover:-translate-y-1 hover:scale-110' do
      .flex.h-full.w-full
        = image_tag '/partners/logo1.png', size: '100x100', class: 'h-full w-full p-1 object-scale-down'
    = link_to partners_path(foreign_partner: '3'), class: 'border-2 border-black transform hover:-translate-y-1 hover:scale-110' do
      .flex.h-full.w-full
        = image_tag '/partners/logo3.png', size: '100x100', class: 'h-full w-full p-1 object-scale-down'
    = link_to partners_path(foreign_partner: '4'), class: 'border-2 border-black transform hover:-translate-y-1 hover:scale-110' do
      .flex.h-full.w-full
        = image_tag '/partners/logo4.png', size: '100x100', class: 'h-full w-full p-1 object-scale-down',
    
  -if params[:foreign_partner]
    = render 'pages/partials/foreign_partners'
  
  %h2.text-center.my-6.text-xl.font-extrabold.text-gray-700.md:text-2xl
    = t('pages.partners.domestic_partners')
  .grid.grid-cols-5.gap-x-4
    %div
    = link_to partners_path(domestic_partner: '5'), class: 'border-2 border-black transform hover:-translate-y-1 hover:scale-110' do
      .flex.h-full.w-full
        = image_tag '/partners/logo5.png', size: '100x100', class: 'h-full w-full p-1 object-scale-down'
    = link_to partners_path(domestic_partner: '6'), class: 'border-2 border-black transform hover:-translate-y-1 hover:scale-110' do
      .flex.h-full.w-full
        = image_tag '/partners/logo6.png', size: '100x100', class: 'h-full w-full p-1 object-scale-down'
  -if params[:domestic_partner]
    = render 'pages/partials/domestic_partners'

My 'foreign partners' partial:

.flex.flex-col.border-2.mt-6.p-8.relative.sm:flex-row.md::flex-row.lg::flex-row.xl:flex-row.2xl:flex-row{ :role => "region", :'aria-label' => "#{t("pages.partners.partners.#{params[:foreign_partner]}.company_name")}" }
  .absolute.right-0.top-0
    = link_to 'X', partners_path,  class: 'w-7 h-7 bg-gray-100 flex justify-center items-center hover:bg-gray-300', role: "button", 'aria-label': "#{t("a11y.close") + " " + t("pages.partners.partners.#{params[:foreign_partner]}.company_name")}"
  .flex.flex-col.mr-2.w-full{class: 'sm:w-1/2 md:w-1/2 lg:w-1/2 xl:w-1/2 2xl:w-1/2'}
    .flex.justify-center.items-center.w-full.h-72
      = image_tag "/partners/#{params[:foreign_partner]}-logo.png", size: '250x250', class: 'object-scale-down p-1', alt: "Logo #{t("pages.partners.partners.#{params[:foreign_partner]}.company_name")}"
    %p.py-3.text-xl.font-extrabold
      = t("pages.partners.partners.#{params[:foreign_partner]}.company_name")
    .bg-gray-100.h-max.flex.items-center
      = image_tag '/partners/link.ico', size: '25x25', alt: "#{t("a11y.link")}"
      = link_to t("pages.partners.partners.#{params[:foreign_partner]}.website_link"), t("pages.partners.partners.#{params[:foreign_partner]}.website_link"), target: "_blank", class: 'ml-3 hover:text-primary-500'
    .bg-gray-100.my-2.h-max.flex.items-center
      = image_tag '/partners/email.ico', size: '25x25', alt: 'E-Mail:'
      = mail_to t("pages.partners.partners.#{params[:foreign_partner]}.company_email"), t("pages.partners.partners.#{params[:foreign_partner]}.company_email"), class: 'ml-3 hover:text-primary-500'
    .bg-gray-100.h-max.flex.items-center
      = image_tag '/partners/phone.ico', size: '25x25', alt: "#{t("a11y.phone")}"
      %span.ml-3= t("pages.partners.partners.#{params[:foreign_partner]}.company_phone_number")
  .flex.flex-col.border-t-2.mt-3.w-full.sm:border-t-0.sm:border-l-2.sm:mt-0{class: 'sm:w-1/2 md:w-1/2 lg:w-1/2 xl:w-1/2 2xl:w-1/2'}
    .flex.flex-col.p-4.overflow-y-auto.h-96.md:p-8
      %p.text-2xl.font-extrabold= t('pages.partners.about_company')
      %p.mt-5.text-justify.overflow-y-auto= t("pages.partners.partners.#{params[:foreign_partner]}.content")    

My 'domestic_partners' partial:

.flex.flex-col.border-2.mt-6.p-8.relative.sm:flex-row.md::flex-row.lg::flex-row.xl:flex-row.2xl:flex-row{ :role => "region", :'aria-label' => "#{t("pages.partners.partners.#{params[:domestic_partner]}.company_name")}" }
  .absolute.right-0.top-0
    = link_to 'X', partners_path, class: 'w-7 h-7 bg-gray-100 flex justify-center items-center hover:bg-gray-300', role: "button", 'aria-label': "#{t("a11y.close") + " " + t("pages.partners.partners.#{params[:domestic_partner]}.company_name")}"
  .flex.flex-col.mr-2.w-full{class: 'sm:w-1/2 md:w-1/2 lg:w-1/2 xl:w-1/2 2xl:w-1/2'}
    .flex.justify-center.items-center.w-full.h-72
      = image_tag "/partners/#{params[:domestic_partner]}-logo.png", size: '250x250', class: 'object-scale-down p-1', alt: "Logo #{t("pages.partners.partners.#{params[:domestic_partner]}.company_name")}"
    %p.py-3.text-xl.font-extrabold
      = t("pages.partners.partners.#{params[:domestic_partner]}.company_name")
    .bg-gray-100.h-max.flex.items-center
      = image_tag '/partners/link.ico', size: '25x25', alt: "#{t("a11y.link")}"
      = link_to t("pages.partners.partners.#{params[:domestic_partner]}.website_link"), t("pages.partners.partners.#{params[:domestic_partner]}.website_link"), target: "_blank", class: 'ml-3 hover:text-primary-500'
    .bg-gray-100.my-2.h-max.flex.items-center
      = image_tag '/partners/email.ico', size: '25x25', alt: 'E-Mail:'
      = mail_to t("pages.partners.partners.#{params[:domestic_partner]}.company_email"), t("pages.partners.partners.#{params[:domestic_partner]}.company_email"), class: 'ml-3 h hover:text-primary-500'
    .bg-gray-100.h-max.flex.items-center
      = image_tag '/partners/phone.ico', size: '25x25', alt: "#{t("a11y.phone")}"
      %spna.ml-3= t("pages.partners.partners.#{params[:domestic_partner]}.company_phone_number")
  .flex.flex-col.border-t-2.mt-3.w-full.sm:border-t-0.sm:border-l-2.sm:mt-0{class: 'sm:w-1/2 md:w-1/2 lg:w-1/2 xl:w-1/2 2xl:w-1/2'}
    .flex.flex-col.p-4.overflow-y-auto.h-96.md:p-8
      %p.text-2xl.font-extrabold= t('pages.partners.about_company')
      %p.mt-5.text-justify.overflow-y-auto= t("pages.partners.partners.#{params[:domestic_partner]}.content")

controller:

  def partners
    set_meta_tags(title: t('navbar.partners'))
  end

Ok, so I did it like this: In routes.rb I added this route:

post 'partners/:partner', to: 'pages#partners_partial', as: 'partners_partial'

In pages_controller.rb:

  def partners
    set_meta_tags(title: t('navbar.partners'))
  end

  def partners_partial
    @parameter = params[:partner]
    respond_to do |format|
      format.turbo_stream
    end
  end

In partials I removed 'params[..._partner] and replace it with local variable 'parameter'.

Next i change 'partners_path', to "partners_partial_path(partner: 'string')" in partial and view.

And last part. I Added 'partners_partial.turbo_stream.haml' file in 'pages' directory.

-if @parameter == 'close'
  = turbo_stream.replace 'partner' do
    %div#partner
-else
  = turbo_stream.replace 'partner' do
    = render partial: 'pages/partials/foreign_partners', locals: {parameter: @parameter}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM