htmxpress

用于快速从Rust结构体生成htmx的过程宏。

属性

参考

• element
• attrs
• attr
• format
• nest
• map
• before/after
• default
• list
• hx
• urlencode

element

在指定的元素内包含字段内容到最终的HTML中。

每个字段/结构体只允许一个元素属性。

当应用于结构体时，它内部的全部元素将被指定的元素包装。

没有此属性的字段在生成HTML时将被忽略。随后，与HTML元素相关的任何其他属性也将被忽略。

示例

use htmxpress::{Element, HtmxElement};

#[derive(Element)]
#[element("div")]
struct El {
  #[element("p")]
  foo: String
}

<div><p>foo</p></div>

attrs

指定元素的HTML属性。对常用静态属性很有用。

属性以 ident = "value" 对的形式指定。

示例

use htmxpress::{Element, HtmxElement};

#[derive(Element)]
#[element("div")]
#[attrs(class = "container")]
struct El {
  #[element("p")]
  #[attrs(class = "inner", id = "foo")]
  foo: String
}

<div class="container"><p class="inner" id="foo">foo</p></div>

attr

指定元素的单个属性。

当属性必须动态创建或其键不能写成有效的Rust标识符时很有用。

示例

use htmxpress::{Element, HtmxElement};

#[derive(Element)]
#[element("div")]
#[attr("funky-attr" = "value")]
struct El {
  #[element("p")]
  #[attr("dynamic" = "{}", param)]
  foo: String,
  param: usize,
}

<div funky-attr="value"><p dynamic="param">foo</p></div>

format

使用提供的格式字符串格式化元素的内容。

仅在字段上有效。

示例

use htmxpress::{Element, HtmxElement};

#[derive(Element)]
#[element("div")]
struct El {
  #[element("p")]
  #[format("Hi, I'm {}")]
  foo: String
}

<div><p>Hi, I'm foo</p></div>

map

在写入HTML之前使用表达式映射此字段的值。

此属性仅应用于HTML生成。任何带有此属性的字段在用于其他属性的格式字符串时仍将使用其原始值。

有效语法为 variable => { /* 对变量进行操作 */ }

示例

use htmxpress::{Element, HtmxElement};

#[derive(Element)]
#[element("div")]
struct El {
  #[element("p")]
  #[attr("id" = "{}", foo)]
  #[map(var => var.is_empty())]
  #[format("Empty: {}")]
  foo: String
}

let el = El { foo: "foo".to_string() };
let html = r#"<div><p id="foo">Empty: false</p></div>"#;

assert_eq!(html, el.to_htmx());

<div><p id="foo">Empty: false</p></div>

default

仅在 Option 和未标记为 map 的字段上有效。

通常情况下，在HTML生成过程中被标注为element且值为None的Option将被完全忽略，不会创建任何DOM对象。此属性确保即使在字段值为None的情况下，元素也会根据指定内容创建。

示例

use htmxpress::{Element, HtmxElement};

#[derive(Element)]
#[element("div")]
struct El {
  #[element("p")]
  #[default("foo")]
  foo: Option<String>,

  #[element("p")]
  bar: Option<String>
}

let el = El { foo: None, bar: None };
let html = r#"<div><p>foo</p></div>"#;

assert_eq!(html, el.to_htmx())

<div><p>foo</p></div>

before/after

在元素内容之前/之后插入/追加字符串。

在父元素内部插入元素时非常有用，尤其是在处理列表时。

当与list一起使用时，它将在第一个/最后一个元素之前/之后插入指定的字符串。

示例

use htmxpress::{Element, HtmxElement};

#[derive(Element)]
#[element("div")]
struct El {
  #[element("section")]
  #[before("<h1>Win a million dollars</h1>")]
  #[after("<button>Do it</button>")]
  foo: String
}

let el = El { foo: "You are the chosen one".to_string() };
let html = r#"<div><section><h1>Win a million dollars</h1>You are the chosen one<button>Do it</button></section></div>"#;

assert_eq!(html, el.to_htmx())

<div>
  <section>
    <h1>Win a million dollars</h1>
    You are the chosen one
    <button>Do it</button>
  </section>
</div>

nest

适用于任何实现了HtmxElement结构的字段。在当前结构上下文中调用底层实现。

示例

use htmxpress::{Element, HtmxElement};

#[derive(Element)]
#[element("div")]
struct El {
  #[element("section")]
  #[nest]
  foo: Qux
}

#[derive(Element)]
struct Qux {
  #[element("p")]
  qux: &'static str,
}

let el = El { foo: Qux { qux: "qux" } };
let html = r#"<div><section><p>qux</p></section></div>"#;

assert_eq!(html, el.to_htmx())

<div>
  <section><p>qux</p></section>
</div>

list [(嵌套)]

用于列表集合。适用于任何其项目实现了Display的迭代器。

为列表中的每个项目创建指定的元素，使用项目的值作为其内容。

当作为list(嵌套)使用时，对列表中的每个项目调用to_htmx()，并将其写入最终HTML。

示例

use htmxpress::{Element, HtmxElement};

#[derive(Element)]
#[element("ul")]
struct El {
  #[element("li")]
  #[list]
  foo: Vec<&'static str>,

  #[list(nest)]
  #[element("li")]
  bar: Vec<Qux>,
}

#[derive(Element)]
struct Qux {
  #[element("p")]
  qux: &'static str,
}

let el = El { foo: vec!["foo1", "foo2"], bar: vec![Qux { qux: "qux" }] };
let html = r#"<ul><li>foo1</li><li>foo2</li><li><p>qux</p></li></ul>"#;

assert_eq!(html, el.to_htmx())

<ul>
  <li>foo1</li>
  <li>foo2</li>
  <li>
    <p>qux</p>
  </li>
</ul>

hx, hx_method

hx_*属性对应于htmx中可用的AJAX方法。它们还支持格式化字符串，即可以使用相关结构的字段动态生成。

hx基本上与attrs相同，只不过它将hx添加到每个键的前面。

需要动态值时，请使用attr。

示例

use htmxpress::{Element, HtmxElement};

#[derive(Element)]
#[element("div")]
#[hx_get("/foo/{}", path)]
#[hx("swap" = "innerHtml")]
#[attr("hx-target" = "#{}", id)]
struct El {
  path: &'static str,

  #[element("p")]
  #[attr("id" = "{}", id)]
  #[format("Meaning of life: {}")]
  id: usize,
}

let el = El { id: 420, path: "bar" };
let html = r##"<div hx-get="/foo/bar" hx-target="#420" hx-swap="innerHtml"><p id="420">Meaning of life: 420</p></div>"##;

assert_eq!(html, el.to_htmx())

<div hx-get="/foo/bar" hx-swap="innerHtml" hx-target="#420">
  <p id="420">Meaning of life: 420</p>
</div>

urlencode

在需要编码URL参数时使用。

示例

use htmxpress::{Element, HtmxElement};

#[derive(Element)]
#[element("div")]
#[hx_get("/foo/{}", path)]
#[urlencode]
struct El {
  path: &'static str,
}

let el = El { path: "my bar" };
let html = r##"<div hx-get="/foo/my%20bar"></div>"##;

assert_eq!(html, el.to_htmx())

<div hx-get="/foo/my%20bar"></div>

更多示例

#[derive(Debug, htmxpress::Element)]
#[element("div")]
#[hx_post("/somewhere/{}", some_property)]
struct Parent {
    some_property: String,

    #[element("p")]
    #[hx_get("/somewhere/else")]
    #[format("I am a p! {}")]
    my_p: String,

    #[nest]
    child: Child,
}

#[derive(Debug, htmxpress::Element)]
#[element("div")]
#[attrs(id = "child", class = "child-class")]
#[hx_get("/elsewhere")]
struct Child {
    #[element("p")]
    #[attr("id" = "keepit{}", meaning_of_life)]
    #[format("Always keep it {}")]
    meaning_of_life: usize,
}

<div hx-post="/somewhere/something">
  <p hx-get="/somewhere/else">I am a p! Hello World!</p>
  <div hx-get="/elsewhere" id="child" class="child-class">
    <p id="keepit69">Always keep it 69</p>
  </div>
</div>

待办事项列表

• 基本HTML
• Ajax属性
• ez列表集合的属性
• [] 响应特质
• [] 响应特质的hx头