Mô hình dây defer là gì?

Ở bài trước chúng ta đã tìm hiểu về form của livewire, nếu các bạn chưa xem thì vui lòng xem lại tại đây. https. //b29. vn/bai-viet/laravel-livewire-esp-4?id=9

Đến với bài này, chúng ta sẽ nghiên cứu những cái liên quan đến UI hơn

đang tải trạng thái

Bởi vì livewire đang hoạt động trên cơ chế lifecircle và yêu cầu ajax, nên đôi khi bạn thực hiện hành động nào đó trên trang, nó sẽ đợi 1 khoảng thời gian nào đó để yêu cầu đến máy chủ và trả kết quả về. Do đó livewire cung cấp cho ta dễ dàng xử lý trạng thái tải

Chuyển đổi các phần tử trong trạng thái "đang tải"

Đầu tiên, ví dụ bạn muốn tìm kiếm 1 cái gì đó ?

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

Với livewire, chúng ta chỉ cần sử dụng <div> <button wire:click="checkout">Checkout</button> <div wire:loading.remove> Hide Me While Loading... </div> </div> 8, mỗi khi request lên server mà phải đợi kq, thì phần tử này sẽ dcd hiển thị. Hoặc lại thêm trường hợp dữ liệu của bạn tải quá nhanh, nó sẽ xuất hiện các biểu tượng hiển thị và ẩn đi rất nhanh, nó giống như đang bị chớp

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

hãy thêm độ trễ, nó sẽ giúp bạn tải lâu hơn <div> <button wire:click="checkout">Checkout</button> <div wire:loading.remove> Hide Me While Loading... </div> </div> 9. v

Mặc dù yếu tố này được ẩn đi với css là <div> <button wire:click="checkout">Checkout</button> <button wire:click="cancel">Cancel</button> <div wire:loading wire:target="checkout"> Processing Payment... </div> </div> 0 nhiều khi nó lại làm theo bố cục của bạn, thì live cũng cung cấp cho ta những tùy chọn để lựa chọn phù hợp với bố cục của bạn

<div wire:loading.flex>...</div> <div wire:loading.grid>...</div> <div wire:loading.inline>...</div> <div wire:loading.table>...</div>

Ngoài ra, bạn muốn kết quả của bạn được hiển thị lên sau khi tải xong, <div> <button wire:click="checkout">Checkout</button> <button wire:click="cancel">Cancel</button> <div wire:loading wire:target="checkout"> Processing Payment... </div> </div> 1 sẽ làm điều đó. when nào loading xong phần tử kia sẽ xuất hiện/

<div> <button wire:click="checkout">Checkout</button> <div wire:loading.remove> Hide Me While Loading... </div> </div>

Nhắm mục tiêu các hành động cụ thể

Các trường hợp trên thì bạn chỉ sử dụng được với những thành phần đơn giản, thành phần đôi lúc của bạn sẽ có 2 3 nơi tải dữ liệu từ máy chủ, như mỗi lần tải, nơi nào có dây. loading will be done thi

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

Do đó livewire lại cung cấp cho ta <div> <button wire:click="checkout">Checkout</button> <button wire:click="cancel">Cancel</button> <div wire:loading wire:target="checkout"> Processing Payment... </div> </div> 2, mục tiêu chỉ định tải mục tiêu đối với bất kỳ hành động nào. Ngoài ra nó cũng chấp nhận nhiều thông số như. <div> <button wire:click="checkout">Checkout</button> <button wire:click="cancel">Cancel</button> <div wire:loading wire:target="checkout"> Processing Payment... </div> </div> 3, or if you have action and back has param then must be handle as after

<div> <button wire:click="checkout">Checkout</button> <div wire:loading.remove> Hide Me While Loading... </div> </div> 1

Mô hình nhắm mục tiêu

Ngoài mục tiêu cho 1 hành động chúng ta cũng nhắm mục tiêu cho mô hình

<div> <button wire:click="checkout">Checkout</button> <div wire:loading.remove> Hide Me While Loading... </div> </div> 2

Chuyển đổi lớp học

Bạn cũng có thể chỉ định tải lớp css khi tải với công cụ sửa đổi <div> <button wire:click="checkout">Checkout</button> <button wire:click="cancel">Cancel</button> <div wire:loading wire:target="checkout"> Processing Payment... </div> </div> 4 vào dây. tải chỉ thị

<div> <button wire:click="checkout">Checkout</button> <div wire:loading.remove> Hide Me While Loading... </div> </div> 4

Chuyển đổi thuộc tính

Tương tự như lớp, các thuộc tính của HTML bạn cũng có thể làm tương tự luôn

<div> <button wire:click="checkout">Checkout</button> <div wire:loading.remove> Hide Me While Loading... </div> </div> 5Bỏ phiếu

Livewire cung cấp một chỉ thị được gọi là wire. thăm dò ý kiến, khi thêm nó vào 1 phần tử, nó sẽ tự động làm mới thành phần mỗi 2 giây, nó tương tự như <div> <button wire:click="checkout">Checkout</button> <button wire:click="cancel">Cancel</button> <div wire:loading wire:target="checkout"> Processing Payment... </div> </div> 5 của js

<div> <button wire:click="checkout">Checkout</button> <div wire:loading.remove> Hide Me While Loading... </div> </div> 7

Bỏ phiếu bằng cách sử dụng ajax để cập nhật thành phần, và có thể thay thế những cái đơn giản như thay vì sử dụng Laravel Echo, Pusher. hoặc WebSocket

Bỏ phiếu trong nền

Livewire sẽ giảm bỏ phiếu khi duyệt tab ở chế độ nền để nó không làm hỏng máy chủ với các yêu cầu ajax không cần thiết, chỉ khoảng cách 5% yêu cầu bỏ phiếu được chạy

Nếu bạn muốn nó luôn chạy dưới nền thì

<div wire:loading.delay>...</div> 0Chỉ bỏ phiếu khi phần tử hiển thị. double when your element was hidden khi đi dưới màn hình nhỏ. that it must refresh liên tục, điều này ko tốt<div wire:loading.delay>...</div> 1

điều này giúp khi phần tử của bạn có thể được làm mới

tìm nạp trước

Cơ chế này khá hay, nó giúp chúng ta tìm nạp dữ liệu khi chưa đưa con chuột vào vị trí nào đó

**GHI CHÚ. Điều này rất hữu ích cho các trường hợp khi một hành động không phải là tác dụng phụ (như ghi vào phiên hoặc cơ sở dữ liệu). Nếu hành động "pre-fetching" của bạn có tác dụng phụ trong đó, thì tác dụng phụ sẽ không đoán trước được những gì xảy ra. **

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

Bây giờ, khi đưa chuột vào nút "Hiển thị nội dung", Livewire sẽ hiển thị trước kết quả của hành động <div> <button wire:click="checkout">Checkout</button> <button wire:click="cancel">Cancel</button> <div wire:loading wire:target="checkout"> Processing Payment... </div> </div> 6 trong nền. Nếu nó được nhấp, thì nó sẽ hiện nội dung lên và không có kq trước đó r. Nếu nút KHÔNG được nhấp, thì kết quả đó sẽ bị loại bỏ, vì thế cho nên nó không khuyến khích chúng ta sử dụng prefreching cho các trường hợp lưu vào phiên hoặc DB là như vậy

Trạng thái ngoại tuyến

Đôi khi, điều quan trọng là phải thông báo cho người dùng nếu họ bị mất kết nối Internet. Livewire cung cấp các tiện ích hữu ích để thực hiện các hành động dựa trên trạng thái "ngoại tuyến" của người dùng

Chuyển đổi các yếu tố

Với cái này, khi người dùng đang ở sài gòn và bị ngắt mạng, sẽ thông báo cho họ biết là họ đang ở trạng thái offline

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

Chuyển đổi lớp học

Cơ chế này cũng giống như <div> <button wire:click="checkout">Checkout</button> <button wire:click="cancel">Cancel</button> <div wire:loading wire:target="checkout"> Processing Payment... </div> </div> 7, bạn cũng có thể chuyển đổi lớp hoặc thuộc tính

<div wire:loading.delay>...</div> 4Bẩn Kỳ

Cái này thật ra cơ chết hoạt động cũng như tải, ngoại tuyến hay bỏ phiếu, nó sẽ hoạt động khi dữ liệu của bạn chưa đồng bộ với livewire BE. Ví dụ như khi đang nhập ô đầu vào, trong lúc nhập sẽ thêm lớp gì đó và sau khi nhập xong, đầu vào của bạn được đồng bộ với BE nó sẽ tắt đi

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

Ngoài ra nó còn có cơ chế hoạt động như những cái mình nêu trên nên sẽ làm như sau

<div wire:loading.delay>...</div> 6Trì hoãn tải

Cái này nó sẽ hoạt động giống như <div> <button wire:click="checkout">Checkout</button> <button wire:click="cancel">Cancel</button> <div wire:loading wire:target="checkout"> Processing Payment... </div> </div> 8 trong js, và <div> <button wire:click="checkout">Checkout</button> <button wire:click="cancel">Cancel</button> <div wire:loading wire:target="checkout"> Processing Payment... </div> </div> 9 của jquery và attr <div> <button wire:click="checkout">Checkout</button> <div wire:loading.remove> Hide Me While Loading... </div> </div> 10 của HTML, có nghĩa là đôi khi bạn không muốn nó tải tất cả dữ liệu khi trang đang tải, mà phải tải sau khi trang được tải xong. Livewoman cung cấp cho ta chỉ thị <div> <button wire:click="checkout">Checkout</button> <div wire:loading.remove> Hide Me While Loading... </div> </div> 11 để làm việc này

Trì hoãn trong Livewire là gì?

Tại sao Livewire được sử dụng?

Livewire hoạt động như thế nào?

Livewire có phải là không đồng bộ không?