maomi
Introduction
Guide
Documents

Template Updates

Template updates

Maomi is based on data bindings. Changing the component fields will auto-update the template.

However, changes to the component fields should always be asynchronous. To visit the component fields, a task must be generated.

#[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(),
}
}
// this function is executed after the component creation
fn created(&self) {
// acquire a ref-counted token of the component
let this = self.rc();
// generate a task
this.task(move |this| {
this.my_string = "changed".to_string();
// the template will be updated after the task ends
});
}
}

About tasks

Tasks are asynchronous jobs that can visit one component.

To generate a task, call "task(...)" on the ref-counted token. In this way, the template will always be updated after the task ends.

Sometimes it is needed to read fields but not update them. To avoid the template update overhead, it is able to generate a read-or-write task.

impl Component for MyWebsite {
fn created(&self) {
let this = self.rc();
this.task_with(move |this, ctx| {
// the template will be not be updated
// unless need_update is called
// ctx.need_update();
});
}
}

Because tasks are asynchronous, references cannot move across tasks. Thus &self is not usable in tasks. The ref-counted token can be cloned and move across tasks.

< Template Repeats
Events >
Basics
Write a Component
Template Semantics
Template Nodes
Template Branches
Template Repeats
Template Updates
Events
Stylesheets
Style Classes
Conditional Styles
Style Constants
Style Functions
Global Stylesheets
Components
Using Components
Component Events
Properties
Advanced Features
Server Side Rendering
I18n Support
Performance Tips
Runtime Performance Tips
Compilation Performance Tips