[templates] Item variable shadowed by second repeat, how to solve?

[herrKlein]

Hi,

I need the item variable from the 1st loop, but is is shadowed by the 2nd loop.
Can I name the 'item' variable. I can't find it in the documentation.

<template>
<template type="repeat" repeat="{{ currentItem.responses }}"> <!-- 1 -->
   
   {{ item.text }}
   <!-- ⇧ ------ item is the response -->

   <test-scoring-buttons .item="{{ currentItem }}">
      <template>
         <template type="repeat" repeat="{{ scores }}"> <!-- 2 -->
            
            <!-- I need the response in the item of the first loop in the name variable -->
            <input type="radio" name="{{ __item__.identifier }}" ?checked="{{item == score}}"  />
           
            <span>{{item}}</span>
         </template>
      </template>
   </test-scoring-buttons>
</template>
</template>

ChatGPT suggests the as attribute, but that does not seem to work.

...
      <template type="repeat" repeat="{{ scores }}" as="score">
        <!-- Now 'score' is used inside this loop, and 'item' still refers to the response from the outer loop -->
        <input type="radio" name="{{ item.identifier }}" ?checked="{{item == score}}" />
        <span>{{ score }}</span>
      </template>
...

Is there a way to solve this?

Originally posted by @herrKlein in #35

[herrKlein]

With the changes below I am able to (re)name the 'item' variable in a repeat.
This works.

Are you willing to implement these changes, or show me an alternative way.
I am willing to contribute by making a pullrequest and writing a test for this specific feature.

Let me know!

export const repeatHandler: TemplateHandler = (
  template: HTMLTemplateElement,
  model: object & {this?: unknown},
  handlers: TemplateHandlers,
  renderers: Renderers,
) => {
  const repeatAttribute = template.getAttribute('repeat');
+ const asAttribute = template.getAttribute('as');

  if (repeatAttribute !== null) {
    const items = getSingleValue(repeatAttribute, model);
    if (!items[Symbol.iterator]) {
      return nothing;
    }
    const litTemplate = getLitTemplate(template);

    let index = -1;
    const result = [];
    for (const item of items) {
      index++;
      const itemModel = Object.create(model);
-    itemModel.item = item;
+    itemModel[asAttribute || 'item'] = item;
      itemModel.index = index;
      itemModel['this'] = model['this'] ?? model;