t-foreach: only renders the last entry when a list of dicts is injected from JS to XML

Question

Problem: When trying to pass a variable value from JS to XML, only the last entry got rendered with a t-foreach directive.

Current Result: Only the last item gets to the DOM

<div class="p-3 bg-light">
  <h5>ertyujbhjkl</h5>
  <p>buy cake</p>
  <p>fjkjjjjj</p>
</div>

Expected: Each of the items should get presented

<div class="p-3 bg-light">
  <h5>fsfgshsj</h5>
  <p>buy milk</p>
  <p>yuu</p>
</div>
<div class="p-3 bg-light">
  <h5>ertyujbhjkl</h5>
  <p>buy cake</p>
  <p>fjkjjjjj</p>
</div>

Codes:

JS

function app() {
    class TestCall extends owl.Component {
        constructor() {
            super(...arguments);
            this.items = [
                {
                    id: 3,
                    title: "fsfgshsj",
                    date: "buy milk",
                    about: "yuu",
                },
                {
                    id:4,
                    title: "ertyujbhjkl",
                    date: "buy cake",
                    about: "fjkjjjjj",
                },
            ];
        }
    }

    class App extends owl.Component { }
    App.components = { TestCall };


    //------------------------------------------------------------------------------
    // Application Startup
    //------------------------------------------------------------------------------

    owl.mount(App, { target: document.body });

}

/**
 * Initialization code
 * This code load templates, and make sure everything is properly connected.
 */
async function start() {
    let templates;
    try {
        templates = await owl.utils.loadFile('app.xml');
        console.log('found')
    } catch (e) {
        console.error(`This app requires a static server.  If you have python installed, try 'python app.py'`);
        return;
    }
    const env = { qweb: new owl.QWeb({ templates }) };
    owl.Component.env = env;
    await owl.utils.whenReady();
    app();
}

start();

Template:

<templates>
    
    <t t-name="TestCall" t-foreach="items" t-as="item">
        <div class="p-3 bg-light" t-key="item.id">
            <h5 t-esc="item.title"></h5>
            <p t-esc="item.date"></p>
            <p t-raw="item.about"></p>
        </div>
    </t>

    <div t-name="App" class="app">
        <TestCall />
    </div>
</templates>

Answer 1

As discussed in a github issue,

As of Owl <2.x, components with nested tags (multiple roots) aren't supported. Thus, the needed functionanality was achieved by following ged-odoo's comment:

1. change <t t-name="TestCall" ... line to <div t-name="TestCall">
2. move t-foreach below div application

The resulting code XML is:

    <div t-name="TestCall" >
        <div class="p-3 bg-light" t-foreach="items" t-as="item" t-key="item.id">
            <h5 t-esc="item.title"></h5>
            <p t-esc="item.date"></p>
            <p t-raw="item.about"></p>
        </div>
    </div>

Good news: Gery promised this will be supported as from OWL 2.0