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

are you looking for suggestions on how to implement the `DocFilterValueConverter`? I'm unclear on the question — Jeremy Danyow, Nov 12 '15 at 17:53
nevermind- I think I understand- you want a reference to the filtered array of documents. — Jeremy Danyow, Nov 12 '15 at 17:54
@JeremyDanyow Yes, actually I'm just looking for some elegant way of doing that, not something ugly as described in UPD1 :) — Alexander Mikhalchenko, Nov 12 '15 at 17:58

score 9 · Accepted Answer · edited Jun 20 '20 at 09:12

9

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>

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 12 '15 at 18:03

Jeremy Danyow

26,470
12
87
133

Thank you for your answer, I think the ``let.foo`` thing is an awesome idea – Alexander Mikhalchenko Nov 12 '15 at 18:07
2

added an option using the `with` binding that you might like better – Jeremy Danyow Nov 12 '15 at 18:10
@JeremyDanyow is there any an alias can be provided for `$this`, like `as` in Knockout? – Sayan Pal Oct 10 '16 at 13:28
what about if I add a item to the array? in my test it didn't update the view https://gist.run/?id=b98ccbb33e0b32c6387d31eb1240d33b – talski Oct 24 '16 at 18:56
I've found a way, https://gist.run/?id=67f19cc1fa2394ed01b025ac984f080f – talski Oct 24 '16 at 19:43

Aurelia get value conventer results in view

What I want:

What I get:

So,

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

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 Answers1

Edit

Linked

Aurelia get value conventer results in view

What I want:

What I get:

So,

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

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 Answers1

Edit

Linked

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 :