BorisMoore / jsviews

Interactive data-driven views, MVVM and MVP, built on top of JsRender templates
http://www.jsviews.com/#jsviews
MIT License
856 stars 130 forks source link

Filtered array length #418

Closed alnico2001 closed 5 years ago

alnico2001 commented 5 years ago

On a filtered array:

{{:#get("array").data.length}} returns the correct length for the filtered array.

{{:~array.length}} returns the length of the original array.

Should they both return the same length when filtered?

I normally use the second method...and so got side tracked for a while until I tried the first method ;-)

Maybe something to add to the filter documentation if indeed only the first method is applicable.

BorisMoore commented 5 years ago

Using the filter feature on the {{for}} does not modify the array you are passing to it. It applies the filter just to obtain a reduced array of items to be rendered.

You can do:

{^{for ~array filter=filter1}}...{{/for}}
{^{for ~array filter=filter2}}...{{/for}}

Each {{for}} tag acts on the same unmodified ~array and renders a different filtered subset.

Doing {^{:#get("array").data.length}} from within the tag will get the data of the "array" view, which will be the filtered array which is actually rendered. Doing {^{:~array...}} will access the original ~array whether you place it within the {{for}} tag or outside.

You can also access the filtered array from by using the sorted 'out' parameter:

{{for ~array filter=filter1 sorted=~myfilteredarray}}

You can then access it from anywhere as {^{:~myfilteredarray.length}},. but you may need to have a null check if you are accessing it too early: {^{:~myfilteredarray && ~myfilteredarray.length}}, or else use the more advanced late-binding feature: {^{:@~myfilteredarray.length}} - which is not yet documented.

See the sample https://www.jsviews.com/#samples/sort-filter@jsv-for, which has: {^{for lineItems sort=~sortBy reverse=~reverseSort filter=~category sorted=~sorted paged=~paged}}

If you are also setting start and end parameters on the {{for}} you can access the resulting 'filtered and paged' array using paged=~myfilteredandpagedarray.

alnico2001 commented 5 years ago

Thank you for explaining and with additional examples and scenarios. I missed seeing the filtering examples section (very nice!)...only read the api filtering section.

I definitely need to brush up on my understanding of MVVM ;-)

As always, thank you for you excellent work.

BorisMoore commented 5 years ago

Sure, it's a pleasure.