maomi
Introduction
Guide
Documents

Events

Event bindings

It is able to bind an event listener function to DOM events.

use maomi_dom::event::*;
#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
<div click=@handle_click()> "Click Me" </div>
}
}
impl MyWebsite {
fn handle_click(this: ComponentEvent<Self, MouseEvent>) {
this.task(move |this| {
// update component here
})
}
}

Custom event arguments

When binding listeners, extra arguments can be added.

Only references can be used as arguments (and the data type should implement `Clone` or `ToOwned` trait).

use maomi_dom::event::*;
#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
<div click=@handle_click(&self.my_string_data)> "Click Me" </div>
},
my_string_data: String,
}
impl MyWebsite {
fn handle_click(_this: ComponentEvent<Self, MouseEvent>, s: &str) {
log::debug!("Clicked: {}", s);
}
}

Tap events

Maomi provides tap events as a combination of mouse events and touch events.

#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
<div tap=@handle_tap()> "Click Me" </div>
}
}
impl MyWebsite {
fn handle_tap(_this: ComponentEvent<Self, TapEvent>) {
log::debug!("Tapped");
}
}

Long tap events are also supported.

#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
<div tap=@handle_tap() long_tap=@handle_long_tap()> "Click Me" </div>
}
}
impl MyWebsite {
fn handle_tap(_this: ComponentEvent<Self, TapEvent>) {
log::debug!("Tapped");
}
fn handle_long_tap(_this: ComponentEvent<Self, TapEvent>) {
// avoid further tap event
ev.prevent_default();
log::debug!("Long tapped");
}
}
< Template Updates
Style Classes >
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