• Czas czytania ~ :czas min
  • 01.06.2022

Laravel Livewire to świetne narzędzie do uzyskania dynamicznego zachowania na stronie, bez bezpośredniego pisania kodu JavaScript. I, jak każde narzędzie, ma wiele „ukrytych perełek”, zarówno w oficjalnych dokumentach, jak i praktycznych dodatkowych porad dostarczonych przez programistów. Niektóre z nich postanowiłem skompilować w tym artykule. Przejdźmy do tego!

1.Nie potrzeba render()

Typowa metoda render() wygląda mniej więcej tak:

// app/Http/Livewire/PostsShow.php
class PostsShow extends Component
{
    public function render()
    {
        return view('livewire.posts-show');
    }
}

Ale jeśli twoja metoda render() jest tylko jedną linią do renderowania widoku domyślnego, możesz usunąć tę metodę render() z komponentu i wszystko będzie nadal działać, ładując domyślny render() z metody dostawcy.

class PostsShow extends Component
{
    // This empty component will still work and load the Blade file
}

2.Komponenty w podfolderach

Jeśli chcesz wygenerować komponent w podfolderze, takim jak app/Http/Livewire/Folder/Component.php, masz dwa sposoby, jak to zrobić:

php artisan make:livewire Folder/Component

lub

php artisan make:livewire folder.component

Zauważ, że pierwszy sposób to pierwsza wielka litera, a druga mała.W obu przypadkach zostaną wygenerowane dwa pliki:

  • app/Http/Livewire/Folder/Component.php
  • resources/views/livewire/folder/component.blade.php

Podfoldery zostaną utworzone automatycznie, jeśli nie istnieją.


3. Komponenty w folderze innym niż domyślny

Jeśli używasz jakiegoś zewnętrznego pakietu z komponentami Livewire, możesz mieć komponent Livewire w innym folderze niż domyślny app/Http/Livewire.Następnie może być konieczne powiązanie jego nazwy z rzeczywistą lokalizacją.

Zazwyczaj odbywa się to w app/Providers/AppServiceProvider.php (lub w dowolnym dostawcy usług) metodą boot():

class AppServiceProvider extends ServiceProvider
{
    public function boot()
    {
        Livewire::component('shopping-cart', \Modules\Shop\Http\Livewire\Cart::class);
    }
}

4. Łatwo zmieniaj nazwy lub przenoś komponenty

Jeśli popełniłeś literówkę podczas generowania komponentu za pomocą make:livewire, nie martw się.Nie musisz ręcznie zmieniać nazw dwóch plików, jest do tego polecenie.

Na przykład, jeśli napisałeś php artisan make:livewire Prduct, ale zamiast tego chcesz "Produkt", a także zdecydowałeś się umieścić go w podfolderze, możesz kontynuować za pomocą tego polecenia:< /p>

php artisan livewire:move Prduct Products/Show

Wynik będzie taki:

COMPONENT MOVED

CLASS: app/Http/Livewire/Prduct.php
    => app/Http/Livewire/Products/Show.php
VIEW:  resources/views/livewire/prduct.blade.php
    => resources/views/livewire/products/show.blade.php

5.

Przykład stubs/livewire.stub:

Na przykład, jeśli chcesz wygenerować komponenty bez metody render(), po prostu usuń je z pliku pośredniczącego, a następnie za każdym razem, gdy uruchomisz php artisan make:livewire Component , pobierze szablon ze zaktualizowanego publicznego odcinka.

php artisan livewire:stubs

6.Nie twórz metody tylko po to, by ustawić wartość

Jeśli masz zdarzenie kliknięcia, które ustawia jakąś wartość jakiejś właściwości, możesz zrobić coś takiego:

<?php
 
namespace [namespace];
 
use Livewire\Component;
 
class [class] extends Component
{
    public function render()
    {
        return view('[view]');
    }
}

A potem


Ale w rzeczywistości możesz przypisać nową wartość do właściwości Livewire bezpośrednio z pliku Blade, bez konieczności posiadania oddzielnej metody w komponencie Livewire.

Oto kod:

<button wire:click="showText">Show</button>

Więc wywołujesz $set i podajesz dwa parametry: nazwę swojej właściwości i nową wartość.

class Show extends Component
{
    public $showText = false;
 
    public function showText() {
        $this->showText = true;
    }
}

7.Krok jeszcze dalej: łatwo ustaw wartość prawdziwą/fałszywą

Kontynuując ostatnią wskazówkę, jeśli twoja właściwość jest zmienną logiczną z wartościami prawda/fałsz i chcesz mieć przycisk pokaż/ukryj, możesz zrobić coś takiego:

<button wire:click="$set('showText', true)">Show</button>

Uwaga: Osobiście unikałbym używania Livewire do tak prostych efektów przełączania, ponieważ dodaje to dodatkowe żądanie do serwera.


Zamiast tego lepiej użyć do tego JavaScript, na przykład Alpine.js:

8. Trzy sposoby na zminimalizowanie żądań serwera

<button wire:click="$toggle('showText')">Show/Hide</button>

Jedną z głównych krytyki Livewire jest fakt, że wysyła zbyt wiele żądań do serwera. Jeśli masz wire:model w polu wejściowym, każde naciśnięcie klawisza może potencjalnie wywołać serwer w celu ponownego renderowania komponentu.Jest to bardzo wygodne, jeśli masz efekty w czasie rzeczywistym, takie jak „wyszukiwanie na żywo”. Ale generalnie żądania serwera mogą być dość drogie pod względem wydajności.

Jednak bardzo łatwo jest dostosować to zachowanie wire:model.

<div x-data="{ open: false }">
    <button @click="open = true">Expand</button>
 
    <span x-show="open">
      Content...
    </span>
</div>

9.Dostosuj atrybuty walidacji

Weryfikacja Livewire działa bardzo podobnie do silnika walidacji Laravel, ale z kilkoma różnicami. W Laravel, jeśli chcesz dostosować nazwy atrybutów, możesz zdefiniować attributes() metoda w klasie Form Request.

Coś, co jest opisane w oficjalnej dokumentacji, ale z tego, co widziałem, dość rzadko używane. Jeśli jakaś akcja zajmuje chwilę na ekranie, warto pokazać wskaźnik ładowania, na przykład obracający się gif lub po prostu tekst „Ładowanie danych...”

  1. wire:model.debounce: by default, Livewire waits for 150ms after the keystroke on the input, before performing the request to the server. But you can override it: <input type="text" wire:model.debounce.1000ms="propertyName">

  2. wire:model.lazy: by default, Livewire is listening for all events on the input, and then performs the server requests. By providing a lazy directive, you tell Livewire to listen only to the change event. It means that the user may keep typing and changing the value, and the server request will be fired only when the user clicks away from that field.

  3. wire:model.defer: this will not fire the server requests on the change of the input. It will save the new value internally and will pass it to the next network request, which may come from other input fields or other button clicks.


W Livewire bardzo łatwo jest nie tylko wdrożyć, ale także dostosować.

Najprostszy przykład przetwarzania danych: po wysłaniu żądania serwera będzie wyświetlany tekst „Przetwarzanie płatności...” do momentu zakończenia żądania serwera i z powrotem z wynikiem.

W praktyce lubię pokazywać takie wskaźniki ładowania tylko wtedy, gdy to trochę potrwa. Nie ma sensu ponownie renderować DOM za każdym razem, w każdym możliwym przypadku.Co jeśli zrobimy to tylko wtedy, gdy żądanie zajmie więcej niż 500 ms?

class ContactForm extends Component
{
    protected $validationAttributes = [
        'email' => 'email address'
    ];
 
    // ...

Łatwe:


Istnieją również możliwości zabawy z klasami CSS w celu ładowania stanów, dołączania ich do określonych akcji i nie tylko: przeczytaj w oficjalna dokumentacja.

11.Wskaźnik trybu offline

Kolejną udokumentowaną, ale mniej znaną funkcją Livewire jest informowanie użytkownika o utracie połączenia internetowego. Może być korzystne, jeśli Twoja aplikacja działa z danymi w czasie rzeczywistym lub wieloma aktualizacjami na ekranie: możesz zamazać niektóre części strony i wyświetlić tekst „offline”.

To takie proste:

<div>
    <button wire:click="checkout">Checkout</button>
 
    <div wire:loading>
        Processing Payment...
    </div>
</div>

Ponadto, jak wspomniałem, możesz zamazać niektóre elementy, przypisując klasy CSS w następujący sposób:

12. Paginacja z Bootstrap Framework

<div wire:loading.delay.longer>...</div>

Podobnie jak Laravel, Livewire domyślnie używa stylizacji stronicowania z platformy Tailwind.Na szczęście łatwo to zmienić, wystarczy podać inną wartość właściwości:


Dostępne projekty paginacji możesz sprawdzić bezpośrednio w repozytorium Livewire Github. Przeglądając to, nie znalazłem żadnych informacji, czy używana jest wersja Bootstrap 4 czy Bootstrap 5.

13.Bez montażu: automatyczne wiązanie modelu trasy z modelem

Jeśli chcesz przekazać obiekt do komponentu Livewire, jest to typowy sposób, aby to zrobić za pomocą metody mount():

<div wire:offline>
    You are now offline.
</div>

W takim razie gdzieś w Blade masz @livewire('show-post', $post).

<div wire:offline.class="bg-red-300"></div>

Istnieje kilka możliwych rozwiązań, prawdopodobnie najbardziej eleganckim jest zatrzymanie wydarzenia Livewire, zanim jeszcze się ono odbędzie:

To event.stopImmediatePropagation() zatrzyma wywołanie metody Livewire, jeśli wynik potwierdzenia jest fałszywy.

class ShowPosts extends Component
{
    use WithPagination;
 
    protected $paginationTheme = 'bootstrap';

Możesz znaleźć kilka innych możliwych rozwiązań na ta dyskusja na temat Github.


To wszystko, mniej znane funkcje Livewire i małe wskazówki. Mam nadzieję, że to było przydatne!

class ShowPost extends Component
{
    public $post;
 
    public function mount(Post $post)
    {
        $this->post = $post;
    }
}
class ShowPost extends Component
{
    public Post $post;
}

<button wire:click="delete($post->id)"
        onclick="return confirm('Are you sure?')">Delete</button>
<button onclick="confirm('Are you sure?') || event.stopImmediatePropagation()"
        wire:click="delete($post->id)">Delete</button>

Comments

No comments yet
Sarah 3:34 PM

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Replies

Sarah 3:34 PM

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Sarah 3:34 PM

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Yurij Finiv

Yurij Finiv

Full stack

O

Professional Fullstack Developer with extensive experience in website and desktop application development. Proficient in a wide range of tools and technologies, including Bootstrap, Tailwind, HTML5, CSS3, PUG, JavaScript, Alpine.js, jQuery, PHP, MODX, and Node.js. Skilled in website development using Symfony, MODX, and Laravel. Experience: Contributed to the development and translation of MODX3 i...

O autorze CrazyBoy49z
WORK EXPERIENCE
Kontakt
Ukraine, Lutsk
+380979856297