- Current syntax:
<div temporary.from-view="filteredAndSortedItems" temporary.bind="items | filter :key | sort :direction "></div>
- Future syntax:
<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
sort value converters, which are quite common when you have a list.
The first binding:
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
The second binding:
temporary.bind="items | filter :key | sort :direction "
means whenever value of either
direction properties changes, re-evaluate the binding and assign it to
temporary prop on the
Combine together two bindings, we get the following meaning of the above element snippet:
directionproperties on the custom element view model changes, recompute the final list and assign it to property named
filteredAndSortedItemson 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
<div temporary.from-view="filteredAndSortedItems" temporary.bind="items | filter :key | sort :direction :items.length "></div>
Now mutating the
items will recompute filteredAndSortedItems
<let/> element you see above is the better way for declaring computed expression in declarative form. It’s waiting for review. You can play with it at (this gist). But you can achieve the same result today via the first pattern.