maomi
介绍
入门
文档

模板列表

for 语句

可以使用 for 语句。

#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
for s in &self.my_list {
<div> { s } </div>
}
},
my_list: Vec<String>,
}

含有 key 的 for 语句

如果列表经常变化，最好为列表指定一个 key 。

key 须为每一项的唯一标识，它用来检测各个项目之间是怎样变化的，从而使列表变更更加高效。

在指定 key 时，列表数据结构必须实现 AsListKey 。

#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
for item in &self.my_list use u32 {
<div> { &item.s } </div>
}
},
my_list: Vec<MyListItem>,
}
struct MyListItem {
id: u32,
s: String,
}
impl AsListKey for MyListItem {
type ListKey = u32;
fn as_list_key(&self) -> &u32 {
&self.id
}
}

如果 for 语句引入了超过一个变量，必须指定哪个变量被用作 key 。

#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
for (_index, item) in self.my_list.iter().enumerate()
use (item) u32
{
<div> { &item.s } </div>
}
},
my_list: Vec<MyListItem>,
}
< 模板分支
模板更新 >
基础入门
编写一个组件
模板语法
模板节点
模板分支
模板列表
模板更新
事件
样式表
样式类
条件样式
样式常量
样式函数
全局样式表
组件
使用组件
组件事件
属性
高级特性
服务器端渲染
i18n 国际化支持
性能建议
运行时性能建议
编译期性能建议