Làm cách nào để bạn gọi một thành phần Livewire khi nhấp vào nút?

Trải nghiệm sử dụng Livewire có vẻ kỳ diệu. Như thể HTML mặt trước của bạn có thể gọi mã PHP của bạn và mọi thứ chỉ hoạt động

Rất nhiều thứ đã làm nên điều kỳ diệu này. Hãy để tôi chỉ cho bạn những gì đang xảy ra

Ví dụ của chúng tôi

Đối với bài viết này, chúng tôi sẽ sử dụng ví dụ về một thành phần bộ đếm đơn giản. Đây là thành phần Livewire trông như thế nào

Phản đối. php

count++;
    }

    public function render[]
    {
        return view['livewire.counter'];
    }
}

phản đối. lưỡi. php

    Count: {{ $count }}

    Increment

Trong ví dụ này, khi chúng tôi tải trang, chúng tôi thấy “Đếm. 0“ và khi chúng tôi nhấn nút “Increment”, số “0” biến thành số “1” một cách kỳ diệu

Bây giờ chúng tôi đã thiết lập một cái gì đó cụ thể, hãy nói về cách Livewire biến điều này thành hiện thực

Kết xuất ban đầu

Giả sử chúng ta muốn đưa thành phần Livewire này vào chế độ xem phiến hoàn toàn tiêu chuẩn. Đây là cách nó sẽ trông như thế nào

    

    @livewireScripts

Khi bạn tải trang này, Laravel xử lý tệp Blade này giống như bất kỳ tệp nào khác, ngoại trừ việc Livewire thực hiện một số hành vi gian lận để Blade chuyển đổi

    

    @livewireScripts

    

    @livewireScripts

Trong trường hợp đơn giản này, lệnh

    

    @livewireScripts

    

    @livewireScripts

Trước khi chúng tôi tìm hiểu những gì đang xảy ra trong

    

    @livewireScripts

Như bạn có thể thấy, Livewire hiển thị thành phần như bạn mong đợi, nhưng nó cũng bơm vào HTML rất nhiều siêu dữ liệu cho các mục đích nội bộ của riêng nó

Chúng ta sẽ tìm hiểu vấn đề này trong phần tiếp theo, nhưng trong khi chúng ta ở đây, chúng ta cũng hãy xem xét ngắn gọn những gì

    Count: 0

    Increment

Về cơ bản, chỉ thị Blade này biên dịch thành hai

    

    @livewireScripts

Như bạn có thể thấy, Livewire tải JavaScript của chính nó, sau đó khởi chạy nó khi trang đã sẵn sàng

Khởi tạo trang

Điều thú vị về Livewire là ngay cả khi bạn đã tắt JavaScript, thành phần này sẽ hiển thị ở dạng HTML thuần túy. Điều này thật tuyệt vời để có được nội dung trên một trang ngay lập tức và làm hài lòng các công cụ tìm kiếm

Bây giờ nội dung đã có trên trang và trong trình duyệt, hãy xem điều gì sẽ xảy ra khi JavaScript của Livewire được khởi tạo và phương thức

    Count: 0

    Increment

Đây là một đoạn trích nguyên văn về hàm

    Count: 0

    Increment

    Count: {{ $count }}

    Increment

Livewire sử dụng

    Count: 0

    Increment

    Count: 0

    Increment

Sau khi tìm thấy chúng, nó sẽ khởi tạo chúng bằng cách chuyển chúng vào một hàm tạo dành riêng cho lớp có tên là

    Count: 0

    Increment

Mỗi thành phần Livewire trên một trang có phiên bản riêng của lớp

    Count: 0

    Increment

Khi khởi tạo

    Count: 0

    Increment

Cụ thể hơn, nó lấy nội dung của thuộc tính

    Count: 0

    Increment

    

    @livewireScripts

Đây là mã JavaScript thực tế từ hàm tạo của

    Count: 0

    Increment

    

    @livewireScripts

Bây giờ JavaScript của Livewire biết các thông tin sau về thành phần "bộ đếm"

• Đó là dấu vân tay [một đối tượng chứa tên, id của thành phần, v.v.]
• Đó là serverMemo [dữ liệu liên tục về thành phần]
• Đó là hiệu ứng [tác dụng phụ sẽ chạy khi tải trang]

Hiểu ba thuộc tính này là điều cần thiết để hiểu hoạt động bên trong của Livewire. Chúng tôi sẽ xem lại chúng sau chi tiết hơn

Giai đoạn khởi tạo cuối cùng là để Livewire duyệt qua tất cả các nút DOM trong một thành phần và tìm kiếm bất kỳ thuộc tính Livewire nào

Trong trường hợp của chúng tôi, chúng tôi có một nút có thuộc tính

    Count: {{ $count }}

    Increment

    

    @livewireScripts

Khi Livewire nhìn thấy phần tử này, nó sẽ đăng ký một trình xử lý sự kiện

    Count: {{ $count }}

    Increment

Trước khi chúng tôi chuyển sang điều đó, hãy xem xét nhanh về vị trí của chúng tôi

Chúng tôi có HTML trên trang trông như thế này

    

    @livewireScripts

Và trong bộ nhớ, JavaScript có một phiên bản của lớp

    Count: 0

    Increment

Hiện tại cũng có một trình lắng nghe sự kiện được đính kèm với phần tử

Hãy chuyển sang khái niệm lớn tiếp theo. thực hiện cập nhật. Mà trong trường hợp của chúng tôi trông giống như nhấp vào nút

Cập nhật trang

Thay vì xem qua mọi thứ xảy ra khi nhấp vào nút, chúng ta hãy xem xét yêu cầu AJAX được gửi đến máy chủ và cả phản hồi AJAX quay lại

Chúng ta có thể nói chi tiết hơn trong một phút, nhưng có thể hữu ích nếu bạn nhìn nhận điều này từ góc độ từ ngoài vào trong

Yêu cầu AJAX

    

    @livewireScripts

Có RẤT NHIỀU thứ đang diễn ra ở đây, vì vậy chúng ta sẽ dành cả một phần cho đối tượng yêu cầu này, nhưng điều quan trọng cần chú ý là đối tượng

    Count: {{ $count }}

    Increment

    Count: {{ $count }}

    Increment

Đây là hai thứ sẽ trông trực quan với bạn

Phản hồi AJAX

    Count: {{ $count }}

    Increment

    Count: {{ $count }}

    Increment

Bây giờ máy chủ đã hoàn thành công việc của mình, phản hồi quay lại chứa HTML mới sẽ hiển thị trên trang VÀ dữ liệu mới được biểu thị bằng JSON

Một lần nữa, tôi sẽ dành toàn bộ phần cho những gì đang diễn ra ở đây, nhưng hãy bắt đầu với việc tìm hiểu sâu về yêu cầu

Yêu cầu

Tôi không chắc có cách nào tốt hơn để tiếp cận phần này ngoài việc chỉ giải thích từng mục riêng lẻ trong tải trọng yêu cầu. Hãy làm nó

vân tay

    Count: {{ $count }}

    Increment

Đây là dữ liệu được liên kết với một thành phần làm cho nó trở nên độc nhất và cung cấp thông tin không thay đổi cần thiết về nó

Ngoài

    Count: {{ $count }}

    Increment

    Count: {{ $count }}

    Increment

Thông tin này thực sự là một phần thiết yếu trong hệ thống bảo mật của Livewire. Khi máy chủ nhận được dữ liệu này, nó sẽ tra cứu lộ trình tải trang ban đầu, trích xuất bất kỳ phần mềm trung gian xác thực nào [và phần mềm trung gian khác] và áp dụng chúng cho mọi yêu cầu tiếp theo từ thành phần này

Bằng cách này, nếu một thành phần được tải trên một trang có ủy quyền đặc biệt, thì ai đó không thể thực hiện yêu cầu AJAX đối với thành phần đó từ một trang khác mà không có ủy quyền đó

bản ghi nhớ máy chủ

    Count: {{ $count }}

    Increment

“Bản ghi nhớ máy chủ” là tất cả dữ liệu KHÔNG thay đổi trong suốt vòng đời của một thành phần. Dữ liệu này được sử dụng để cho Livewire biết cách “hydrat hóa” hoặc khởi động lớp thành phần

    Count: {{ $count }}

    Increment

Có rất nhiều ở đây, nhưng tôi sẽ chỉ đề cập đến những gì liên quan đến hướng dẫn này

bản ghi nhớ máy chủ. dữ liệu

    Count: {{ $count }}

    Increment

Đối tượng dữ liệu là một trong những phần dữ liệu quan trọng và rõ ràng nhất mà chúng ta cần gửi lại máy chủ. Đây là cách phía PHP của Livewire biết rằng họ cần đặt

    

    @livewireScripts

    

    @livewireScripts

bản ghi nhớ máy chủ. dữ liệu

    Count: {{ $count }}

    Increment

Chúng tôi không sử dụng

    

    @livewireScripts

    

    @livewireScripts

    

    @livewireScripts

tổng kiểm tra

    Count: {{ $count }}

    Increment

Đây là tính năng bảo mật quan trọng nhất trong Livewire. Mỗi tải trọng thành phần được ký bằng hàm băm tổng kiểm tra bảo mật được tạo từ toàn bộ tải trọng. Bằng cách này, nếu có bất kỳ thứ gì can thiệp vào dữ liệu được sử dụng để gửi lại máy chủ, phần phụ trợ sẽ có thể biết điều đó và sẽ đưa ra một ngoại lệ

cập nhật

    Count: {{ $count }}

    Increment

"cập nhật" là danh sách các hướng dẫn để thực hiện trên thành phần trong phần phụ trợ. Trong trường hợp của chúng tôi, chúng tôi đang gọi phương thức "increment". Nhưng đây là nơi mà bất kỳ bản cập nhật

    

    @livewireScripts

Phew, ok, bây giờ chúng ta đã có một chút bối cảnh, hãy xem điều gì sẽ xảy ra trên máy chủ khi nó nhận được tải trọng yêu cầu này

Dưỡng ẩm theo yêu cầu

Ok, đã đến lúc PHP. Tôi sẽ không viết ra mọi hoạt động PHP đơn lẻ xảy ra trong một yêu cầu Livewire bởi vì cả bạn và tôi đều ghét điều đó

Thay vào đó chúng ta sẽ chỉ nhìn vào những điểm nổi bật

Khi tải trọng đến từ trình duyệt, PHP sẽ tạo một đối tượng Yêu cầu Livewire mới để lưu trữ tất cả dữ liệu

    Count: {{ $count }}

    Increment

    

    @livewireScripts

    Count: {{ $count }}

    Increment

Phần còn lại của điều kỳ diệu xảy ra trong một phương thức bên trong nhà cung cấp dịch vụ của Livewire [

    

    @livewireScripts

    

    @livewireScripts

    Count: {{ $count }}

    Increment

Để chúng tôi rõ ràng, đây là mã nguồn sao chép/dán thực tế ở trên. Mục tiêu của tôi là thể hiện khái niệm “hydrat hóa” và “khử nước” trực tiếp trong mã

Bạn có thể thấy đoạn mã trên rằng yêu cầu đi qua các phần mềm trung gian này theo một chiều trên đường vào và sau đó theo thứ tự ngược lại trên đường bạn

Để hiểu cách Livewire “hydrat hóa” thuộc tính của một thành phần, chúng ta sẽ xem nhanh bên trong

    

    @livewireScripts

Dưới đây là một vài đoạn trích ra để chứng minh

    

    @livewireScripts

Như bạn có thể thấy trong đoạn mã trên, sau khi “phần mềm trung gian cấp nước” này chạy, lớp thành phần

    Count: {{ $count }}

    Increment

Gọi phương thức "increment"

Bây giờ, thành phần của chúng ta đã “ngậm nước” với trạng thái thích hợp, đã đến lúc thực sự gọi phương thức “increment” của chúng ta trên đó. Điều đó được xử lý trong phần mềm trung gian

    

    @livewireScripts

    

    @livewireScripts

Như bạn có thể thấy, mỗi bản cập nhật kích hoạt

    

    @livewireScripts

Kết xuất thời gian

Bây giờ chúng tôi đã thực hiện yêu cầu, cấp nước cho thành phần VÀ gọi phương thức mà chúng tôi dự định gọi, đã đến lúc hiển thị nội dung của thành phần của chúng tôi ra HTML, sau đó gửi nó trở lại giao diện người dùng

Ở cuối ngăn xếp phần mềm trung gian hydrat hóa, có một phần mềm tên là

    

    @livewireScripts

Thay vì hướng dẫn bạn qua từng lệnh gọi PHP đơn lẻ, tôi sẽ chỉ dán [và làm lại cho đơn giản] trong các đoạn trích có liên quan để bạn có thể nắm được ý chính về cách hiển thị chế độ xem của thành phần Livewire

    

    @livewireScripts

Sau khi thêm HTML vào phản hồi, Livewire có các phần mềm trung gian khác bổ sung thêm nhiều thứ vào phản hồi. Một trong số họ [

    

    @livewireScripts

Hãy xem xét kỹ hơn về tải trọng Phản hồi trước khi nói chuyện lại với giao diện người dùng

Phản hồi

Đây là Phản hồi đầy đủ từ đầu bài viết này để bạn có thể thấy bức tranh toàn cảnh

Phản hồi AJAX

    Count: {{ $count }}

    Increment

    Count: {{ $count }}

    Increment

    

    @livewireScripts

    

    @livewireScripts

    

    @livewireScripts