模板更新

maomi 基于数据绑定。通过改变组件数据字段就可以更新组件的模板中内容。

不过，数据字段的更新必须是异步的。访问数据字段时，必须生成一个 task 。

#[component(Backend = DomBackend)]

struct MyWebsite {

template: template! {

<div> "My Website" </div>

my_string: String,

}

impl Component for MyWebsite {

fn new() -> Self {

Self {

template: Default::default(),

my_string: "original".to_string(),

}

// 这个函数必然在组件创建后执行

fn created(&self) {

// 获得这个组件的“引用计数标识”

let this = self.rc();

// 生成一个 task

this.task(move |this| {

this.my_string = "changed".to_string();

// 模板会在 task 结束时更新

});

}

关于 task

task 是一个可以访问组件的异步过程。

可以通过在组件的引用计数标识上调用 task(...) 来生成一个 task 。模板内容必然在这个 task 结束时更新。

有时只需要读取数据字段而并不一定会改变它，此时可以生成一个“读或写” task 来避免模板更新的开销。

impl Component for MyWebsite {

fn created(&self) {

let this = self.rc();

this.task_with(move |this, ctx| {

// 模板不会被更新

// 除非 need_update 被调用

// ctx.need_update();

});

}

因为 task 是异步的，引用不能穿越 task 使用。所以 &self 并不能在 task 中使用。但组件的引用计数标识可以穿越 task 。

基础入门

模板语法

样式表

组件

高级特性

性能建议