New contextual properties like "$source" for repeat.for

[CombeeMike]

I'm submitting a feature request

• Library Version: 1.2.0

Please tell us about your environment:

• Operating System: Windows 10

• Node Version: 8.9.4

• NPM Version: 5.7.1

• Browser: all

• Language: all

Question: Is it possible to access the filtered items of an repeat.for within a different context as the (piped) filters (value-converters) themselves? Possibly best explained by some example code:

View:

<div repeat.for="item of items | filterBy:theValue:'thePropertyKey'"
     class="${_getListItemCls($index, item, items)}"
>
    <!-- ... -->
</div>

VM:

_getListItemCls(idx, curItem, allItems) {
    // I'd like to access the item which is rendered before the current one e.g. for date comparison etc.
    // The following doesn't work since "allItems" obviously holds all items. Also the ones which are filtered by my
    // value converter "filterBy" in the view...
    let prevItem = (idx > 0) && allItems[idx - 1];
}

Requested feature: If this is not possible, I think that a new contextual property like $source for repeat.for which holds the filtered/converted source array, could be a viable solution. This way I could write the view above in the following way:

<div repeat.for="item of items | filterBy:theValue:'thePropertyKey'"
     class="${_getListItemCls($index, item, $source)}"
>
    <!-- ... -->
</div>

I realize that $source is probably not the best name for such a thing since it could be easily confused with the actual "unfiltered/unconverted" source...

[bigopon]

@jdanyow This could be a nice enhancement, could be source of error if the $source get modified during the loop

[bigopon]

I think this will be resolved with <let/>, as suggested by @jdanyow in other discussion. @EisenbergEffect Can be closed

[CombeeMike]

I don't really see how I could use let for my mentioned use case.

@bigopon or @jdanyow I'd really appreciate some hint or example on how let allows me to access the converted (filtered) list of items inside the repeat.for construct.

[bigopon]

@CombeeMike I would do something like this, it could be different for what you want.

<let filtered-list.bind="items | filterBy :theValue :'thePropertyKey'"></let>
<div
  repeat.for="item of filteredList"
  class="${_getListItemCls($index, item, filteredList)}">
  ...
</div>

[CombeeMike]

Ah, seems very cool! Haven't thought of applying the converter to the let element itself. Thank you very much!

[bigopon]

@CombeeMike I think it's my bad that I didn't include at least one example for combination of let + list + value converter. You got it work, so it would be nice if you could create a PR to extend to doc for <let/> here https://github.com/aurelia/templating/blob/master/doc/article/en-US/templating-custom-elements.md#declarative-computed-values

[CombeeMike]

Ok, I haven't implemented this yet & don't know when I actually will. I'll keep in mind to add the PR after I've actually implemented this.