12/28/2023 0 Comments Phoenix liveview form![]() ![]() LiveView 0.19 introduces two new phx bindings for handling viewport events – phx-viewport-top and phx-viewport-bottom. Viewport bindings for virtualized, infinite scrolling When an item is dropped, the LiveView will receive a “reposition” event with the new and old indexes, plus whatever data attributes exists. Now any stream container can wire up streams with drag-and-drop with the following markup: Here we import sortable.js, then wire it up as a phx-hook. For example, here’s the TodoTrek drag and drop for handling todos and lists: import Sortable from "./vendor/sortable" Hooks.Sortable = For client-side drag-and-drop itself, you can bring your own library and integrate with a dozen of lines of code. All this is possible in LiveView now with a shockingly small amount of code on the client and server. You can also drag and drop todos across lists. You can drag an drop re-order the lists themselves, or todos within the lists. Imagine a trello board where your have named lists holding todo items. LiveView 0.19 supports nested streams, which allows drag and drop to be implemented in just a few lines of code. Nested streams with drop-in drag and drop But that’s just the start of what’s possible. With just a simple stream(socket, :posts, posts, limit: 10) or stream(socket, :posts,, reset: true), you can now accomplish complex client collection handling without having to think about it. This is useful for any case you need to clear results or reset a list, such as search autocomplete, or traditional pagination. In addition to stream limits, streams also now support a :reset optionw, whichs clears the stream container on the client when updating the stream. Combined with new viewport bindings, virtualized, infinite lists can be implemented effortless, which we’ll see in a moment. This is essential for a number of cases, such as the prevention of overwhelming clients with too much data in the DOM. ![]() This allows the developer to instruct the UI to keep the first N, or N items in collection when inserting new items to a stream. Streams can be limited on the UI with the :limit option. With LiveView 0.19, streams close the gap on those primitives. This opened the door to many SPA-like usecases, such as realtime timelines, and infinite feeds, but a couple primitives were lacking. ![]() Streams allow developers to append, prepend, or arbitrary insert and update items in collection on the UI. Streams in LiveView 0.18 introduced a powerful way to handle large collections on the client without storing the collection in server memory. Open source TodoTrek showcase applicationĪs demo’d and as promised in my ElixirConfEU keynote, I’m open sourcing the TodoTrek application, a Trello-like app which showcases the new stream features like drag-and-drop, infinite scrolling, dynamic forms, and more.Įnhanced Stream interface with resets and limits It’s our last planned major release ahead of LiveView 1.0. Once phx-trigger-action is true, LiveView disconnects and then submits the form.Īny idea on how to test that the form actually gets posted?Ĭalling render_submit/2 returns the rendered HTML which I can test to ensure that there are no changeset errors, but I’m at a loss on how to test that it actually posts.Īnd the corresponding event handlers: trueĭef handle_event("validate", % = live(conn, Routes.LiveView 0.19.0 is out! This release includes long awaited dynamic form features, new stream primitives, and closes the gap on what you wished was possible with LiveView. I have a registration form that I’m validating with LiveView and then submitting to a regular controller action over HTTP. Here’s where its mentioned in the docs: Form bindings - Phoenix LiveView v0.15.4 I’m curious how folks are testing LiveView forms that use phx_trigger_action? ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |