maomi
介绍
入门
文档

模板节点

用双引号包裹文本

模板看起来和 HTML 或 XML 差不多,但文本内容必须使用双引号包裹!

#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
// 错误:文本内容必须使用双引号包裹
<div> My Website </div>
// 正确:
<div> "My Website" </div>
}
}

注释

注意,注释是类似 rust 的(与 XML 风格不同)。

#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
// This is a line of comments
/* Some other comments */
}
}

结束标签和自闭合标签

结束标签可以使用 </_> 来简化。

#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
<div> "My Website" </_>
}
}

自闭合标签(类似于 XML )也是支持的。

#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
<div />
}
}

动态文本内容

可以使用表达式来表示动态文本内容。使用 {} 来嵌入一个表达式。

#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
<div> { format!("1 + 2 = {}", 1 + 2) } </div>
}
}

在表达式中可以使用 self 引用。

#[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),
}

请注意:当使用 self 时,不能移出其中的字段。

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

标签属性

可以使用标签属性(类似于 XML ),但非字符串值不能用双引号包裹。

#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
<div id="a" />
<div hidden=true />
}
}

属性值是 =true 时可以省略。

#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
<div hidden />
}
}

标签值也可以使用表达式。注意它是有类型的。

字符串类型的属性只接受字符串值,布尔属性只接受布尔值。

#[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,
}

使用表达式作为值时,表达式值必须是引用。

引用标记 & 可以写在花括号外面——这样写有时候会更直观。

#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
<div hidden=&{ !self.my_boolean_data } />
},
my_string_data: String,
my_boolean_data: bool,
}