在局部視圖中動態加載內容

Question

基本上，我正在嘗試在主頁上實現選項卡。 這些選項卡將由其他頁面上的組件組成，以便快速訪問。 我對如何在以“惰性”方式向布局發送數據的同時導入布局感到困惑。

我現在使用@section標簽來引入布局，這很好。 但是我只想在單擊選項卡時請求它需要的數據。

在我的 main.blade.php 中：

<li>
      <a href="#tab_1" data-controller="tab_1" data-target="#tab_1" data-toggle="tab" aria-expanded="true">
      tab 1 </a>
</li>


<div class="tab-pane" id="tab_1" >
     @yield('tab_1')
</div>

在我的 tab1 中：

@extends('main')
@section('tab_1')
@foreach ($activities as $activity)
{{--implementation--}}
@endforeach
@endsection

在我的 TabController@showtab1 中：

public function showtab1(Request $request) {
   //Logic here
   return view('tab1', ['activities' => $activities]);
}

最佳方案是僅在通過調用控制器函數單擊選項卡時才加載每個選項卡的內容。 我已經通過使用路由來更改整個頁面來讓它工作，但這有點破壞了標簽的優勢。

Answer 1

您通常會以使用相同布局的方式實現這一點，然后通過您的 URL -> 控制器 ->刀片包含參數-> 刀片視圖傳遞不同的參數。

下面的示例演示了如何在 Laravel 中跨文件執行“延遲”加載（同時僅加載 1 個選項卡）：

// /routes/web.php
Route::get('/tabbed-page', 'TabbedPageController@index');
Route::get('/tabbed-page/:tab', 'TabbedPageController@show');

// /App/Http/Controllers/TabbedPageController.php

public function show($request, $tab) {
  $data = ['title'=> 'No tab'];
  if ($tab === 'tab1') { 
    $data = ['title' => 'I am tab 1'];
  }

  return view('page', [
    'tab' => $tab,
    'data'=> $data
  ]);
}
public function index($request) {
  // open tab1 by default
  redirect('/tabbed-page/tab1');
}

{{-- /resources/views/page.php, requested at for example /tabbed-page/tab1 --}}
<nav>
  <a href="tab1" class="@if($tab === 'tab1') active @endif">Tab 1</a>
  <a href="tab2" class="@if($tab === 'tab2') active @endif">Tab 2</a>
  <a href="tab3" class="@if($tab === 'tab3') active @endif">Tab 3</a>
  <a href="tab4" class="@if($tab === 'tab4') active @endif">Tab 4</a>
</nav>
<main>
  @include($tab, $data)
</main>

{{-- /resources/views/tab1.php, tab2.php, tab3.php, etc.. --}}
<div id="tab1">
  <h1>{{ $data['title] }}</h1>
  Content ....
</div>