Quoted text
The template looks like HTML or XML, but the text content must be quoted!
#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
// error: text content must be quoted
<div> My Website </div>
// correct:
<div> "My Website" </div>
}
}
Comments
Note that comments are rust-style (not XML style).
#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
// This is a line of comments
/* Some other comments */
}
}
End tags and self-close tags
The end tag can be replaced by "</_>" for short.
#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
<div> "My Website" </_>
}
}
Self-close tags (like XML) are also supported.
#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
<div />
}
}
Dynamic text content
It is able to use an expression as the text content. Use a brace "{}" to embed an expression.
#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
<div> { format!("1 + 2 = {}", 1 + 2) } </div>
}
}
It is able to use the "self" reference in the expression.
#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
<div> { &self.my_data } </div>
},
my_data: String,
}
#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
<div> "My Website" </div>
},
my_data: format!("1 + 2 = {}", 1 + 2),
}
Be careful: when using fields in "self", do not move out the fields.
#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
<div> { self.my_data } </div>
<div> { &self.my_data } </div>
},
my_data: String,
}
Attributes
It is able to use attributes (like XML), but non-string values should not be quoted.
#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
<div id="a" />
<div hidden=true />
}
}
The "=true" can be omitted.
#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
<div hidden />
}
}
Attributes also support expressions. Note that the attributes are typed.
String attributes can only be assigned string values. Boolean attributes can only be assigned boolean values.
#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
<div id={ &self.my_boolean_data } />
<div id={ &self.my_string_data } />
<div hidden={ &self.my_string_data } />
<div hidden={ &self.my_boolean_data } />
},
my_string_data: String,
my_boolean_data: bool,
}
Expressions for attributes always accept references.
The "&" can be written outside the brace - sometimes it looks better.
#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
<div hidden=&{ !self.my_boolean_data } />
},
my_string_data: String,
my_boolean_data: bool,
}
