Quasar To Do Concept (using maud templating)

todo.rs

use quasar::*;

struct TodoItem {
    label: String,
    complete: bool,
}

struct TodoList {
    items: Vec<TodoItem>,
}

impl Renderable for TodoList {
    fn render(&self, _props: Properties) -> String {
        (html! {
            h3 { "To Do List (" (self.items.len()) " items)" }
            ul id="todo-ul" {
                @for item in self.items {
                    li class={ "todo-item " (item.complete) } {
                        input type="checkbox"
                        (item.label)
                    }
                }
            }
            input id="message" type="text"
            button { "Add" }
        }).into_string()
    }
}

pub fn init<B>(app: &QuasarApp) -> View<TodoList> {
    let component = TodoList {
        items: vec![
            TodoItem { label: "Example Task".to_string(), complete: false },
        ]
    };

    let view = app.bind("#todo-list", component);

    view.query("button")
        .on(EventType::Click, |mut evt| {
            let message = evt.binding.query("#message").get("value");
            let item = TodoItem { label: message, complete: false };
            evt.binding.data_mut().items.push(item);
        });

    view.on_each(EventType::Click, '.todo-item input[type=checkbox]', |i, mut evt| {
        let state = evt.target.get("value") == "checked";
        let mut item_list = evt.binding.data_mut();
        item_list[i].complete = state;
    })

    view
}