t-foreach:当dicts列表从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

正如github问题中所讨论的，

截至Owl<2.x，不支持具有嵌套标记(多个根(的组件。因此，通过遵循ge-doo的评论实现了所需的功能性：

1. 将<t t-name="TestCall" ...行更改为<div t-name="TestCall">
2. 将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承诺这将从OWL2.0开始得到支持