Aurelia get value conventer results in view

Question

I would like to get the result of value conventer that filters an array in my view in order to display the number of results found.

  <div repeat.for="d of documents|docfilter:query:categories">
    <doc-template d.bind="d"></doc-template>
  </div>

I neither want to move this logic to my controller (to keep it clean), nor to add crutches like returning some data from the value controller.

What I want:

So, basically I would like something like angular offers: Like shown here : ng-repeat="item in filteredItems = (items | filter:keyword)" or here : ng-repeat="item in items | filter:keyword as filteredItems"

What I get:

Unfortunately, in Aurelia:

d of filteredDocuments = documents|docfilter:query:categories

actually means d of filteredDocuments = documents |docfilter:query:categories , and if I add brackets or as , it won't run (fails with a parser error).

So,

Is there a clean way of getting data out of data-filter in view ?

Best regards, Alexander

---

UPD 1: when I spoke about returning some data from the value controller I meant this:

export class DocfilterValueConverter {
  toView(docs, query, categories, objectToPassCount) {
    ...
    objectToPassCount.count = result.length;
    ...
  });
});

UPD 2. Actually, I was wrong about this: d of filteredDocuments = documents |docfilter:query:categories . It does not solve the issue but what this code does is :

1) filteredDocuments = documents |docfilter:query:categories on init 2) d of filteredDocuments which is a repeat over the filtered at the very beginning array

Answer 1

Assuming you have an outer-element, you can stuff the filtered items into an ad-hoc property like this:

<!-- assign the filtered items to the div's "items" property: -->
<div ref="myDiv" items.bind="documents | docfilter : query : categories">

  <!-- use the filtered items:  -->
  <div repeat.for="d of myDiv.items">
    <doc-template d.bind="d"></doc-template>
  </div>

</div>

I know this isn't exactly what you're looking for but it will do the job. I'm looking into whether it would be helpfull to add a let binding command- something like this: <div let.foo="some binding expression">

Edit

Here's something a bit nicer: https://gist.run/?id=1847b233d0bfa14e0c6c4df1d7952597

<template>
  <ul with.bind="myArray | filter">
    <li repeat.for="item of $this">${item}</li>
  </ul>
</template>