Combining these two events with stream limits, allows you to perform “virtualzed” infinite scrolling, where only a small set of the items exist in the DOM, while the user experiences the list a large, or infinite set of items. These events a triggered when the first child of a container reaches the top of the viewport, or the last child reaches the bottom of the viewport. 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
#Phoenix liveview form plus
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.
#Phoenix liveview form 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.
#Phoenix liveview form update
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. 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.
0 kommentar(er)
