How do I bind a pagination element to a passed collection param inside a component?

[davhad]

A component with one param (a collection) displays the elements of the collection. This is done by binding the container with the passed collection. The pagination element inside should also be bound to the passed collection but it seems unbindable.

In the screenshots below we are in the component. The container is bindable to the passed collection and the paginator isn’t.

Are there any recommended workarounds?

[Broberto]

Yep, I raised this issue a long time ago (December 2023) - still hasn’t been tackled, it’s not only about a few things, but many things aren’t bindable yet unfortunately.

Making dropdown bindable

Do you think guys that it would be possible to make all the components more bindable? With the advent of the Reusable Components, it’s a wall I’m hitting too often. I put the logic within the component (such as the dropdown example here, and then I just end up stuck with silly stuff like direction, alignement etc.) [Screenshot 2023-12-11 at 10.56.03]

[davhad]

@broberto thanks for sharing your experience. Too bad because I find reusability in weweb generally quite good. Maybe an oversight.

Still other than passing params and having the collection formed inside of the component, I’m curious what other workaround patterns the community has explored…

[Broberto]

I went digging a little bit, and if you wanted to do this, you can and it’s actually pretty simple.

What you want to do is the following:

1. Create your component, with your paginator, it has to be set to Custom Pagination
2. Create a variable of type Collection (collection_id) on that component
3. Add an On change event onto your pagination element, by using the details from the event, you can use this method in a Custom JavaScript Action (this method is what WeWeb uses to do the same with the paginator):

wwLib.wwCollection.setOffset([your_colleciton_id_variable_here], [event.index] * [event.offset]);
// This wwLib method takes two arguments, setOffset(collection_id <uuid>, offset <integer> )

The offset is basically how many items you want to have, so lets say you want to have three items per page, for a page two, this would be six items (2*3). I’ve tested it and it actually works.