t-foreach：当字典列表从 JS 注入到 XML 时，只呈现最后一个条目

Question

问题：尝试将变量值从 JS 传递到 XML 时，只有最后一个条目使用 t-foreach 指令呈现。

当前结果：只有最后一项进入DOM

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

预期：每件物品都应展示

<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>

代码:

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();

模板：

<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

如 a github issue、

中所述

从 Owl <2.x 开始，不支持带有嵌套标签（多个根）的组件。因此，所需的功能性是通过遵循 ged-odoo 的评论来实现的：

将 <t t-name="TestCall" ... 行更改为 <div t-name="TestCall">
将 t-foreach 移动到 div 应用程序下方

结果代码XML是：

    <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>

好消息：Gery 承诺从 OWL 2.0

开始支持此功能

t-foreach：当字典列表从 JS 注入到 XML 时，只呈现最后一个条目

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

xml

foreach

odoo

qweb