# How to (1): Declare a computed list piped through value converter & binding behavior

**URL:** <https://discourse.aurelia.io/t/how-to-1-declare-a-computed-list-piped-through-value-converter-binding-behavior/536>\
**Category:** Framework Knowledge\
**Created:** [December 15, 2017, 9:12am UTC](https://discourse.aurelia.io/t/how-to-1-declare-a-computed-list-piped-through-value-converter-binding-behavior/536 "2017-12-15T09:12:04Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [December 15, 2017, 9:12am UTC](https://discourse.aurelia.io/t/how-to-1-declare-a-computed-list-piped-through-value-converter-binding-behavior/536/1 "2017-12-15T09:12:05Z")

</div>

1. Current syntax:

```html
<div
  temporary.from-view="filteredAndSortedItems"
  temporary.bind="items | filter :key | sort :direction "></div>

```

1. Future syntax:

```html
<let
  filtered-and-sorted-items.bind="items | filter :key | sort :direction"></let>

```

* * *

Explanation for current syntax:

We are creating 2 bindings in the above snippet to compute `filteredAndSortedItems` based on `items`, piped through `filter` and `sort` value converters, which are quite common when you have a list.

The first binding:

```html
temporary.from-view="filteredAndSortedItems"

```

means whenever value of `temporary` property, of the `div` element, changes, assign it to `filteredAndSortedItems` property of the custom element view model associated with the view containing the `div` element.

* * *

The second binding:

```html

temporary.bind="items | filter :key | sort :direction "

```

means whenever value of either `items`, `key`, `direction` properties changes, re-evaluate the binding and assign it to `temporary` prop on the `div` element.

* * *

Combine together two bindings, we get the following meaning of the above element snippet:

> Whenever either **`items`** , **`key`** or **`direction`** properties on the custom element view model changes, recompute the final list and assign it to property named **`filteredAndSortedItems`** on the same custom element view model.

_The order of bindings is left out for some fun guess._ We declare `from-view` binding first so when `temporary.bind` binding gets the first value, it will trigger the assignment and assign it to the view model.

* * *

The above will not work if you mutate the `items` collection instead of assigning a new collection instance. example: push a new item to `items`, pop, shift, splice etc…

There is a work around for this situation. We can tell Aurelia to also observe the collection to reevaluate the bindings, by telling it to observe the `length` property:

```html
<div
  temporary.from-view="filteredAndSortedItems"
  temporary.bind="items | filter :key | sort :direction :items.length "></div>

```

Now mutating the `items` will recompute filteredAndSortedItems

* * *

The `<let/>` element you see above is the better way for declaring computed expression in declarative form. It’s waiting for [**review**](https://github.com/aurelia/templating/pull/564). You can play with it at [**(this gist)**](https://gist.run/?id=80d070452f6c5afbe9173571422da317). But you can achieve the same result today via the first pattern.