Struct seed::virtual_dom::el_ref::ElRef

source ·

pub struct ElRef<E> {
    pub shared_node_ws: SharedNodeWs,
    /* private fields */
}

Expand description

DOM element reference. You want to use it instead of DOM selectors to get raw DOM elements.

Note: Cloning is cheap, it uses only phantom data and Rc under the hood.

Example

use seed::{prelude::*, *};

#[derive(Default)]
struct Model {
    canvas: ElRef<web_sys::HtmlCanvasElement>,
}

enum Msg {
    Rendered
}

fn view(mdl: &Model) -> impl IntoNodes<Msg> {
    canvas![
        el_ref(&mdl.canvas),
        attrs![ /* ... */ ],
    ]
}

fn update(msg: Msg, mdl: &mut Model, orders: &mut impl Orders<Msg>) {
    match msg {
        Msg::Rendered => {
            let canvas = mdl.canvas.get().expect("get canvas element");
            // ...
            orders.after_next_render(|_| Msg::Rendered).skip();
        }
    }
}

Fields§

§shared_node_ws: SharedNodeWs

Implementations§

source §

impl<E: Clone + JsCast> ElRef<E>

source

pub fn new() -> Self

source

pub fn get(&self) -> Option<E>

Get referenced DOM element.

It returns Some(element) when:

An associated DOM element has been already attached during render.
The DOM element is still a part of the current DOM.
The DOM element has the same type like ElRef.

source

pub fn map_type<T>(&self) -> ElRef<T>

Map ElRef type.

It just changes type saved in the phantom - it’s cheap.
It’s useful when you have, for instance, ElRef<HtmlInputElement> and want to focus the referenced input. HtmlInputElement doesn’t have method focus, but parent interface HtmlElement has.

Example

use seed::{prelude::*, *};
use web_sys::{HtmlInputElement, HtmlElement};

struct Model {
  my_input: ElRef<HtmlInputElement>
}

enum Msg {}

fn update(_: Msg, mdl: &mut Model, orders: &mut impl Orders<Msg>) {
    let input: ElRef<HtmlInputElement> = mdl.my_input.clone();
    orders.after_next_render(move |_| {
        input
            .map_type::<HtmlElement>()
            .get()
            .expect("get `my_input`")
            .focus()
            .expect("focus 'my_input'");
    });
}