lit-html-rs

这是一个由Google Polymer项目创建的HTML模板库lit-html的Rust库。

这个库仍处于非常早期阶段

[dependencies]
lit-html = "0"

基础

lit-html通过创建模板以高效渲染到DOM来工作。当你构建TemplateData对象时，你的数据正从WebAssembly移动到JavaScript中的对象，该对象可以由lit-html模板使用。

你可以在TemplateData上放置以下数据

• 字符串
• 数字
• 布尔值
• 回调函数

use js::*;
use lit_html::*;

#[no_mangle]
pub fn main() {
    let data = TemplateData::new();
    data.set("name", "Ferris");
    render(html!(r#"<h1>Hello ${_.name}</h1>"#, &data), DOM_BODY);
}

查看工作效果这里。

计数器

你可以通过创建包含其他数据绑定模板的模板来构建复杂的UI。lit-html在数据更改时高效地操作DOM。

use js::*;
use lit_html::*;

static mut COUNT: u32 = 0;

fn counter() -> Template {
    let data = TemplateData::new();
    data.set("count", unsafe { COUNT });
    data.set("increment", || {
        unsafe { COUNT += 1 };
        rerender();
    });
    html!(
        r#"The current count is ${_.count} <button @click="${_.increment}">+</button>"#,
        data
    )
}

fn app() -> Template {
    let data = TemplateData::new();
    data.set("content", counter());
    html!(
        r#"<div>This is a counter in Rust!</div><div>${_.content}</div>"#,
        data
    )
}

fn rerender() {
    render(&app(), DOM_BODY);
}

#[no_mangle]
pub fn main() {
    rerender();
}

查看工作效果这里。