Au 2.0: Contextual property $previous not working on repeat.for (all other contextuals do work)

Help Requests
1

Hello,

I have the following simplistic list rendering (I thought I would try out $previous to simplify rendering navigational tabs):

<template repeat.for="module of tabsModel; key: module.topic">
  <!-- <test harness to see if $previous ever contains anything> -->
  <div>${$previous}</div> 
  <!-- <actual markup> -->
  <div if.bind="module.groupKey !== $previous?.groupKey" class="tsi-bid-navigator-nav-group">
        ${groups[module.groupKey]}
  </div>
  <div>${module.title}</div>
</template>

I included an extra div above that references $previous just to see if it renders anything at all. It doesn’t. It is the only contextual property that doesn’t. I went through the table of contextuals in the documentation, and all the rest work. The if.bind is always true since $previous?.groupKey is always undefined.

I even tried setting contextual to true explicitly:

<template repeat.for="module of tabsModel; key: module.topic; contextual: true">
...
</template>

That didn’t work, either. $previous never contains any data.

For completeness, here’s a fragment of tabsModel from back on the viewModel:

this.tabsModel = [{
    groupKey: 'project',        
    title: 'correspondence',
    topic: 'correspondence',
  },
  {
    groupKey: 'project',
    title: 'files',
    topic: 'files',
  },
  {
    groupKey: 'tools',
    title: 'Weather',
    topic: 'weather',
  },
  {
    groupKey: 'tools',
    title: 'Mobilization',
    topic: 'mob',
  },
  {
    groupKey: 'masterbid',
    title: 'factors',
    topic: 'factors',
  }
  ...
]

I even loaded the 12/1/25 browser extension posted by @dwaynecharrington to see if the repeat.for controller showed up there with the contextuals. It does, but none of the contextuals displays. It simply reads “repeat module of tabsModel”.

2

Sorry, but I don’t think this has been released yet in a non-dev build. You’ll see this has been added, but won’t be available until the next release. We really gotta sort out our docs versioning with releases. Which is an issue @bigopon and others on the team have discussed a few times.

2 Likes
3

Hello @dwaynecharrington ,

I just realized that you might have thought that my post was about the browser extension, although the issue I’m facing might dovetail into it.

But maybe I’m confused. Are you saying that $previous is not available yet, or that the browser extension isn’t ready yet?

4

It seems $previous was only recently added with this PR here feat(repeat): add opt-in contextual property for repeat by Vheissu · Pull Request #2261 · aurelia/aurelia · GitHub

Aurelia docs browser seem to be always in sync with master branch. Which in turns causes some recently added, not yet released features / changes to be already covered by the docs . Personally I’ve stumbled across this a couple of times already.

Not a big issue once you are aware of it, but first time I spent quite a bit of time trying to figure out what the hell is wrong with my code or dependencies, until I figured out I’m trying to use a feature that’s not part of any release yet

5

Ah, I see. I didn’t realize that that was possible…with respect to the synchronization of the documentation, I mean. Good to be aware of.

But in the meantime, I tried this, with great success:

<template repeat.for="module of tabsModel; key: module.topic">
  <div if.bind="module.groupKey !== tabsModel[$index - 1]?.groupKey" class="tsi-nav-group">
    ${groups[module.groupKey]}
  </div>
  ...
</template>

It would seem that a backward index reference provides the same feature, and the controller must be written with robustness: tabsModel[$index - 1] doesn’t blow up when $index is zero.

This will do, I think, until $previous becomes available.

1 Like
6

Beta 27 just shipped and contains this new feature. Sorry for the confusion. I’m looking into how to make it so docs and releases are in sync.

7

Thanks for the update! I’ve been reading about Beta 27—looks awesome!

1 Like