You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I've been playing around with hotwire for the last couple of days and so far I really like it, great work! 馃憤 However, I couldn't yet figure out how to deal with data that is sorted (e.g. has an order field with a numeric value). So when an element is created instead of just adding / prepending it to the turbo frame, it should be added as the nth element in the list.
I was thinking of something that could work similar to this:
<turbo-streamaction="append" target="messages" index="5"><template><divid="message_1">
This div will be appended to the element with the DOM ID "messages" as the 5th element.
</div></template></turbo-stream>
<turbo-streamaction="update" target="message_2" index="3"><template><!-- The contents of this template will replace the contents of the element with ID "message_2" and change its position to the third place. -->
1
</template></turbo-stream>
Another approach could consist of leveraging Node.insertBefore() in combination with a new StreamAction called insertBefore:
<turbo-streamaction="insertBefore" target="messages" reference="message_2"><template><divid="message_1">
This div will be appended to the element with the DOM ID "messages" before the element with the DOM ID "message_2".
</div></template></turbo-stream>
Do you plan to support more advanced use cases like this? Is there a simple way to change the behavior of the StreamActions (i.e. to switch out this.targetElement?.append(this.templateContent) with something more sophisticated)?
The text was updated successfully, but these errors were encountered:
The way we solve this problem in HEY, which also requires sorting, is with a Stimulus controller:
exportdefaultclassextendsApplicationController{initialize(){this.observeMutations(this.sortChildren)}// PrivatesortChildren(){const{ children }=thisif(elementsAreSorted(children))returnchildren.sort(compareElements).forEach(this.append)}getchildren(){returnArray.from(this.element.children)}append=child=>this.element.append(child)}functionelementsAreSorted([left, ...rights]){for(constrightofrights){if(compareElements(left,right)>0)returnfalseleft=right}returntrue}functioncompareElements(left,right){returngetSortCode(right)-getSortCode(left)}functiongetSortCode(element){returnelement.getAttribute("data-sort-code")||0}
Don't see adding this directly to Turbo, but do see this being part of a Stimulus stdlib.
I've been playing around with hotwire for the last couple of days and so far I really like it, great work! 馃憤 However, I couldn't yet figure out how to deal with data that is sorted (e.g. has an
order
field with a numeric value). So when an element is created instead of just adding / prepending it to the turbo frame, it should be added as the nth element in the list.I was thinking of something that could work similar to this:
Another approach could consist of leveraging Node.insertBefore() in combination with a new
StreamAction
calledinsertBefore
:Do you plan to support more advanced use cases like this? Is there a simple way to change the behavior of the StreamActions (i.e. to switch out
this.targetElement?.append(this.templateContent)
with something more sophisticated)?The text was updated successfully, but these errors were encountered: