如何使用turbo渲染不带变量的分部

Question

我在互联网上搜索，但只找到了"更新后如何渲染部分"等。现在我点击图片，页面正在引用并显示部分。但这个令人耳目一新的部分……对我不好，所以我想知道。。我可以用Turbo渲染部分(或者替换，如果我已经渲染了一个(吗？

Ruby版本：3.0.4Rails版本：6.1.6

我的观点：

 .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'

我的"外国合作伙伴"部分：

.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")    

我的"domestic_partners"部分：

.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")

控制器：

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

Answer 1

好的，所以我这样做了：在routes.rb中，我添加了以下路线：

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

在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

在部分中，我删除了"params[…_partner]"，并将其替换为局部变量"parameter"。

接下来，我将"partners_path"更改为"；partners_partial_path(partner:'string'("在局部和视图中。

最后一部分。我在"pages"目录中添加了"partners_partial.turbo_stream.haml"文件。

-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}