Alexander M. Alexander M. - 4 months ago 25
Javascript Question

Aurelia get value conventer results in view

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>

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
, and if I add brackets or
, it won't run (fails with a parser error).


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

Best regards, Alexander

UPD 1: when I speaked 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
. It does not solve the issue but what this code does is :

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


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>


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"some binding expression">


Here's something a bit nicer:

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