Динамическая загрузка контента в частичном представлении - PullRequest
Новая
       10

Динамическая загрузка контента в частичном представлении

0 голосов
/ 23 января 2020

По сути, я пытаюсь реализовать вкладки на главной странице. Вкладки будут состоять из компонентов на других страницах для быстрого доступа. Я запутался в том, как я могу импортировать макет, отправляя в него данные «ленивым» способом.

Теперь я использую тег @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>

в моей вкладке1: 

@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]);
}

Оптимальный сценарий - загрузка содержимого для каждой вкладки только при нажатии на вкладку путем вызова функции контроллера. Я заставил его работать, используя маршруты для изменения всей страницы, но это как бы сводит на нет преимущество вкладок.

1 Ответ

0 голосов
/ 23 января 2020

Обычно вы реализуете это таким образом, чтобы использовать тот же макет, а затем передавать другой параметр через ваш URL -> controller -> параметр включения блейда -> представление блейда.

В приведенном ниже примере показано, как можно выполнять «ленивую» загрузку (одновременно загружать только 1 вкладку) для файлов в Laravel: 

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