Turbo streams like API #440
Replies: 1 comment 1 reply
|
In your example I would re-render the entire list after deleting item, reusing the template I already have. While I don't personally prefer the style of RJS / TurboStreams you could build something similar yourself using the E.g. the server sends: X-Up-Events: [{ type: 'element:destroy', selector: '#list-item123' }]
X-Up-Target: :noneYour frontend picks up the up.on('element:destroy', function({ selector }) {
let fragment = up.fragment.get(selector)
if (fragment) fragment.destroy()
}) |
|
Thanks for sharing the events idea. I will opt for it.
Just sharing: I think, re-rendering a list can lead to bad UX in many scenarios. For example, my current viewport has list items, The app I am working on, we do not shift the UI unless user takes an explicit action. If you modify/delete a list item and the server notices that the list items have changed, it will send some markup saying |
Uh oh!
There was an error while loading. Please reload this page.
I have been using Unpoly on almost every web app I create. The experience has been superb, except I am missing the ability to define DOM actions from the server.
Right now, every Unpoly action results in updating some part of the DOM using the
up-targetattribute. However, there are cases, when I want to delete some element or append to a list of collection.Turbo streams API is designed exactly to do that. Instead of reacting to events on the frontend, you can let the backend decide how to modify the DOM after a given action.
For example:
DELETEbutton next to it.DELETEbutton triggers the server request.remove.All reactions